Detailed explanation of the use of this in JavaScript_Basic knowledge

We have to remember one sentence: this always points to the object where the function is running! rather than the object in which the function was created. Remember...
This article will analyze where this object is in three situations.
This in ordinary functions
No matter where this is, the first priority is to find the location of the function when it is running.

Copy code The 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 function getName of the global environment, the runtime position of the function getName is at

Copy code The code is as follows :

alert(getName());

Obviously, the object where the function getName is located is the global object, that is, window, so the home of this must be in window. At this time, this points to the window object, so the this.name returned by getName is actually window.name, so the alert comes out as "global"!
So, when this does not appear in the function of the global environment, but appears in the function of the local environment, where will it fall?

Copy code The 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 function getName in which this is located is not in the global environment, but in the twobin environment. No matter where this is, you must find the location when the function is running. At this time, the position of the function getName when it is running

Copy code The code is as follows:

alert(twobin. getName());

Obviously, the object where the function getName is located is twobin, so the home of this must be in twobin, that is, pointing to the twobin object, then the this.name returned by getName is actually twobin. name, so the alert comes out as "partial"!
This in closure
Closure is also a troublemaker. This article will not go into details about it for the time being. In short: the so-called closure is to create another function inside a function, and the internal function accesses the external variable.
The prodigal son this is mixed with the ruffian closure, it is obvious that there will never be peace!

Copy code The 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 trouble, and it is actually anonymous in the getName function Inside the function, the anonymous function calls the variable name, thus forming a closure, that is, this is in the closure.
No matter where this is, be sure to find the location when the function is running. At this time, it cannot be judged based on the runtime position of the function getName, but based on the runtime position of the anonymous function.

Copy code The code is as follows:

function (){
return this.name;
};

Obviously, the object where the anonymous function is located is window, so the home of this must be window, then the this.name returned by the anonymous function is actually window.name, so alert What comes out is the “big picture”!
So, how to make this in twobin in the closure?

Copy code The code is as follows:

var name="global";
var twobin={
name:"local",
getName:function(){
var that=this;
return function(){
                                                                                                                                                                                             That=this is defined in the getName function. At this time, the runtime position of the getName function is
alert(twobin.getName());
then 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 that.name returned at this time is actually twobin.name, so the "local" can be alerted!
This in call and apply
The only ones that can control this in JavaScript are call and apply.
Call and apply are like this’s parents. They will live wherever they let this live, and they have to obey!

Copy code


The code is as follows:

var name="global"; var twobin ={name:"local",};function getName(){

alert(this.name);

}
getName(twobin);
getName .call(twobin);


where this is in the function getName. No matter where this is, you must find the location when the function is running. At this time, the position of the function getName when it is running is
getName(twobin);
Obviously, the object where the function getName is located is window, so the home of this must be in the window, that is, pointing to the window object, then getName returns this. The name is actually window.name, so the alert comes out as "global"!
Then, it’s time to call and apply, because this must listen to their command!
getName.call(twobin);
Among them, call specifies that the home of this is the twobin object, because this is forced to settle only in twobin, then this points to the twobin object at this time, and this.name actually It is twobin.name, so the alert comes out as "partial"!

A little summary
The prodigal this: always points to the object where the function is running, not the object where the function is created; if it is in an anonymous function or not in any object, then this points to the window object; if Is call or apply, which object it specifies, then this will point to that object!