The use of this in JavaScript

Remember that this always points to the object where the function is running! Not the object where the function was created. Remember that...
This article will examine where this object actually resides in three scenarios.
This in a normal function
Wherever this is, the first order of business is to find the location of the function when it runs.

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 at run time is

alert(getName());

Obviously, the object on which the function getName resides is the global object, the window, so the place where this resides must be in the window. When this points to the window object, the this.name returned by getName is actually window.name, so the alert is "global"!
So what happens when this appears not in a global function, but in a local function?

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 of this is not in the global environment, but in the twobin environment. Wherever this is, be sure to find the location of the function at runtime. The runtime position of the function getName

alert(twobin.getName());

Obviously, the object where the function getName is located is twobin, so the place where this lives 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 is "local"!
This in the closure
A closure is also an uneasy molecule, which I won't go into too much detail about in this article. In short, a closure is the creation of another function inside a function that accesses an external variable.
Prodigal son this and rascal closure mix together, visible will never be peaceful day!

 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 point, this is clearly in a bind. It is actually inside an anonymous function in the getName function, which in turn calls the variable name and thus constitutes the closure, that is, this is inside the closure.
Wherever this is, be sure to find the location of the function at runtime. This is not determined by the runtime location of the function getName, but by the runtime location of the anonymous function.

function (){
    return this.name;
};

Obviously, the object where the anonymous function is located is window, so the place where this will reside must be in window, then the anonymous function returns this. Name is actually window.name, so the alert comes out "global"!
So, how do you make this in a twobin in a closure?

  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, where the getName function runs at
Alert (twobin. GetName ());
Then this points to the twobin object, so that also points to the twobin object. If you return that. Name in the anonymous function of the closure, then that. Name is actually twobin.name, so you can alert it to "local"!
This in call and apply
This estimation can be managed in JavaScript, which is called and apply.
Call and apply are like the parents of this, let this live where it has to live, have to be obedient!

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

This is in the getName function. Wherever this is, be sure to find the location of the function at runtime. The runtime position of the function getName
GetName (twobin);
Obviously, the object where the function getName is located is the window, so the place of this must be in the window, that is, pointing to the window object, then the this.name returned by getName is actually window.name, so the alert comes out "global"!
So, the call and apply come in, because this must obey their orders!
GetName. Call (twobin);
Where, call specifies that the place of this's home is in the twobin object, because this is forced to live only in the twobin place, then this points to the twobin object, this.name is actually twobin.name, so the alert is "local"!
A summary
Prodigal this: always point to the object where the function is running, not where the function was created. If you are in an anonymous function or not in any object, this points to the window object; If it's call or apply, and it specifies which object, then this points to which object!