This keyword anatomy in JS and JSthis keyword anatomy

This keyword anatomy in JS and JSthis keyword anatomy

This keyword is available in various languages developed. this looks very simple, but its meaning is different in different places.

Easy to confuse. If you have been a Java programmer, you will encounter such a problem. In a class, this represents the instance pair of this class in the class method.

But it is troublesome to have an anonymous internal class. this indicates the Instance Object of the class. In JavaScript, this variable is difficult.

This is a very powerful keyword. A full understanding of this helps us compile object-oriented JavaScript programs.

It is more difficult to understand because I personally feel that JS is more difficult than the Java language. JS is a weak scripting language.

The scope of use is different. Next I will explain my understanding of this keyword in JS scripting language:

1. General use:

The most important thing about this variable is to clarify which object this references. Many documents may have their own explanations

Reading is complicated. My understanding is: First, analyze the method call of the object in which this function is located, and the object is referenced by this.

Object.

Eg1:

Var obj = {};
Object. x = 100;
Obj. y = function () {alert (this. x );};
Obj. y (); // 100 is displayed.

Parsing: this code is very easy to understand. When obj. y () is executed, the function is called as the method of object obj. Therefore, this

If the object is an obj object, 100 is displayed.

Eg2:

Var checkThis = function (){
Alert (this. x );
};
Var x = 'this is a property of Windows ';


Var obj = {};
Object. x = 100;
Obj. y = function () {alert (this. x );};


Var obj2 = obj. y;


Obj. y (); // 100 is displayed.
CheckThis (); // the pop-up 'this is a property of window
Obj2 (); // The 'this is a property of window

Explanation: Why is 'this is a property of window' displayed here, which may be confusing. Variable scope in JavaScript

There is a rule "global variables are properties of window objects ". When checkThis () is executed, it is equivalent to window. checkThis (). Therefore

The point of this keyword in the body of the checkThis function becomes the window object, and because the window object has another x attribute ('this is

Property of window '), so 'this is a property of Windows' will pop up '.

The two examples above are easy to understand, because you only need to determine which object the current function is called (which object is called)

You can easily determine the point of the current this variable.

2. this. x, apply (), call ()

Call and apply can be used to redefine the execution environment of the function, that is, the point of this, which is very common for some applications.

Eg3: ---> call ()

Function changeStyle (type, value ){
This. style [type] = value;
}
Var one = document. getElementById ('one ');
ChangeStyle. call (one, 'fontsize', '100px ');
ChangeStyle ('fontsize', '300px '); // an error occurs because in changeStyle, this references the window object, and the window does not have the style attribute.

Resolution: note that changeStyle. call () has three parameters. The first parameter is used to specify the object to which the function will be called. The

One, which means that the changeStyle function will be called by one, so this point in the function body is the one object. The second and third parameter Pairs

It should be the type and value parameters in the changeStyle function. The most common effect we can see is that the font of the Dom element one is 20 PX.

Eg4: ---> apply ()

Function changeStyle (type, value ){
This. style [type] = value;
}
Var one = document. getElementById ('one ');
ChangeStyle. apply (one, ['fontsize', '100px ']);
ChangeStyle ('fontsize', '300px '); // an error occurs. The cause is the same as example 3.

Resolution: the usage of "apply" is roughly the same as that of "call". There is only one difference. "apply" only accepts two parameters. The first parameter is the same as "call" and the second parameter.

The number must be an array, and the elements in the array correspond to the form parameters of the function.

3. Meaningless (weird) use of this

Eg5:

Var obj = {
X: 100,
Y: function (){
SetTimeout (
Function () {alert (this. x);} // here this points to the window object, which is not the expected obj, so undefined will pop up.
, 2000 );
}
};
Obj. y ();

How can we achieve the expected results?

Eg6:

Var obj = {
X: 100,
Y: function (){
Var that = this;
SetTimeout (
Function () {alert (that. x );}
, 2000 );
}
};
Obj. y (); // 100 is displayed.

4. this In the event listening Function

Var one = document. getElementById ('one ');
One. onclick = function (){
Alert (this. innerHTML); // this points to the one element, which is very simple.

};

Summary:

To sum up, in Javascript, the keyword "this" is in different places and represents different meanings,

This ---> refers to the upper-level object that contains the this pointer;

Call form this point
Window, A Global Object of common functions
Object method.
Newly constructed object of Constructor