How to use this in JavaScript

Remember one sentence: this always points to the object where the function is running! Instead of the object where the function is created. Remember...
This article will analyze the location of this object in three situations.
This in common functions
No matter where this is, the first task is to find the position when the function is running.
Copy codeThe Code is as follows:
1 var name = "Global ";
2 function getName (){
3 var name = "local ";
4 return this. name;
5 };
6 alert (getName ());

When this appears in the getName function of the global environment, the position of the function getName Runtime is
Copy codeThe Code is as follows:
Alert (getName ());

Obviously, the object where the function getName is located is a global object, that is, a window. Therefore, this is stored in a window. In this case, this indicates the window object, and this. name returned by getName is actually window. name, So What alert returns is "Global "!
So when this is not a function in the global environment, but a function in the local environment, where will this be?
Copy codeThe Code is as follows:
1 var name = "Global ";
2 var twobin = {
3 name: "local ",
4 getName: function (){
5 return this. name;
6}
7 };
8 alert (twobin. getName ());

The getName of this function is not in the global environment, but in the twobin environment. No matter where this is, you must find the position when the function is running. The position where the function getName is running
Copy codeThe Code is as follows:
Alert (twobin. getName ());

Obviously, the object where the function getName is located is twobin, so the security of this is definitely in twobin, that is, pointing to the twobin object, then this is returned by getName. name is actually twobin. name, So What alert comes out is "local "!
This in the closure
The closure is also an uneasiness. This article does not repeat it too much. In short, the closure is to create another function within a function and the internal function accesses external variables.
This and the closure of the prodigal child are mixed together. It can be seen that it will never be better!
Copy codeThe Code is as follows:
1 var name = "Global ";
2 var twobin = {
3 name: "local ",
4 getName: function (){
5 return function (){
6 return this. name;
7 };
8}
9 };
10 alert (twobin. getName ()());

At this time, this is obviously in a dilemma, and it is actually in the anonymous function of the getName function, and the anonymous function calls the variable name, thus forming a closure, that is, this is in the closure.
No matter where this is, you must find the position when the function is running. In this case, it cannot be determined based on the location of the function getName runtime, but based on the location of the anonymous function runtime.
Copy codeThe Code is as follows:
Function (){
Return this. name;
};

Obviously, the object where the anonymous function is located is window, so the location of this is fixed in window, then the anonymous function returns this. name is actually window. name, So What alert comes out is "Global "!
So, how to make this in twobin?
Copy codeThe Code is as follows:
Var name = "Global ";
Var twobin = {
Name: "local ",
GetName: function (){
Var that = this;
Return function (){
Return that. name;
};
}
};
Alert (twobin. getName ()());

Define that = this in the getName function, and the position of the getName function is
Alert (twobin. getName ());
This points to the twobin object, so that also points to the twobin object. If that. name is returned in the anonymous function of the closure, the returned that. name is actually twobin. name, so you can generate "local" by alert "!
This in call and apply
The estimation of this that can be managed in JavaScript is not the same as call and apply.
Call and apply are like the parents of this, so that this will have to be obedient!
Copy codeThe Code is as follows:
Var name = "Global ";
Var twobin = {
Name: "local ",
};
Function getName (){
Alert (this. name );
}
GetName (twobin );
GetName. call (twobin );

This is in the getName function. No matter where this is, you must find the position when the function is running. The position where the function getName is running
GetName (twobin );
Obviously, the object where the function getName is located is window. Therefore, the location of this is set to window, that is, to point to the window object. Then, this is returned by getName. name is actually window. name, So What alert comes out is "Global "!
Now the call and apply are on the stage, because this must be under their command!
GetName. call (twobin );
Specifically, call specifies the security of this in the twobin object, because this is forced to settle in the twobin, then this points to the twobin object, this. name is actually twobin. name, So What alert comes out is "local "!
Summary
This: always points to the object where the function is running, rather than the object where the function is created. If it is in an anonymous function or not in any object, this points to the window object; if it is call or apply, it specifies which object, then this points to which object!