Learn about javascript's this keyword _ javascript skills

I want to learn about the this keyword of javascript. this is dynamic binding, or runtime binding, which leads to the ability of this keyword in JavaScript to have multiple meanings and bring flexibility at the same time, it also brings a lot of confusion to beginners. This article only discusses this question. After reading this article, if the reader can correctly answer What's this question in JavaScript, as the author, I will feel that it takes so much effort, it is worthwhile to write such an article.

Remember one sentence:This always points to the object where the function is running! Instead of the object where the function is created. That is, who calls and directs.Remember...

This article will be dividedIn three cases, we can analyze where this object is.
1. this in common functions
No matter where this is, the first task is to find the position when the function is running.

Var name = "Global"; function getName () {var name = "local"; return this. name ;}; alert (getName ());

When this appears in the getName function of the global environment, the position of the function getName Runtime is

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?

Var name = "Global"; var xpg = {name: "local", getName: function () {return this. name ;}}; alert (xpg. getName ());

The getName function of this is not in the global environment, but in the xpg environment. No matter where this is, you must find the position when the function is running. The position where the function getName is running

alert(xpg.getName());

Obviously, the object where the function getName is located is xpg, so the security of this is determined by xpg, that is, pointing to the xpg object, then this is returned by getName. the name is actually xpg. name, So What alert comes out is "local "!

Here is an example to consolidate:

var someone = {  name: "Bob",  showName: function(){    alert(this.name);  }};var other = {  name: "Tom",  showName: someone.showName}other.showName();　　//Tom

Although the this keyword is in someone. it is declared in showName, but it is other during running. showName, so this points to other. the current object of the showName function, that is, other. name.

2. 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!

Var name = "Global"; var xpg = {name: "local", getName: function () {return this. name ;}}}; alert (xpg. 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.

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 xpg in the closure? -Cache this

Var name = "Global"; var xpg = {name: "local", getName: function () {var that = this; return function () {return that. name ;}}}; alert (xpg. getName ()());

Define that = this in the getName function, and the position of the getName function is

alert(xpg.getName());

This points to the xpg object, so that also points to the xpg object. If that. name is returned in the anonymous function of the closure, the returned that. name is actually xpg. name. Therefore, alert can generate "local "!

3. Create a new object with the new Keyword

This in the constructor after the new Keyword points to the new object constructed by the constructor:

Function Person (_ name) {this. name = _ name; // this point is the new object constructed by the constructor. In this example, it is the Bob object} Person. prototype. show = function () {alert (this. name); // this points to Person, this. name = Person. name;} var Bob = new Person ("Bob"); Bob. show (); // Bob

4. 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! If no parameter exists, the current object is window.

Var name = "Global"; var xpg = {name: "local"}; function getName () {alert (this. name);} getName (xpg); getName. call (xpg); getName. call ();

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(xpg);

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 (xpg );
Here, the call specifies the security of this in the xpg object, because this is forced to settle in the xpg, then this points to the xpg object, this. the name is actually xpg. name, So What alert comes out is "local "!

5. this in eval

For the eval function, the current object does not seem to be specified during execution, but in fact this does not point to the window, because the scope of the function execution is the current scope, this is equivalent to filling in the code in this row. The following example illustrates the problem:

var name = "window";var Bob = {  name: "Bob",  showName: function(){    eval("alert(this.name)");  }};Bob.showName();  //Bob

6. this

When there is no explicit execution of the current object, this points to the Global Object window.
For example, for functions referenced by global variables, we have:

var name = "Tom";var Bob = {  name: "Bob",  show: function(){    alert(this.name);  }}var show = Bob.show;show();　　//Tom

You may also understand that show is the method under the window object, so the window is used when the current object is executed. However, functions referenced by local variables cannot be interpreted as follows:

var name = "window";var Bob = {  name: "Bob",  showName: function(){    alert(this.name);  }};var Tom = {  name: "Tom",  showName: function(){    var fun = Bob.showName;    fun();  }};Tom.showName();　　//window

In the browser, the current object for setTimeout, setInterval, and anonymous function execution is the Global Object window, which can be considered as a special case of the previous one.

var name = "Bob"; var nameObj ={    name : "Tom",    showName : function(){      alert(this.name);    },    waitShowName : function(){      setTimeout(this.showName, 1000);    }  };  nameObj.waitShowName();

Therefore, when running this. showName, this points to the window, so the window. name is displayed.

7. this In the dom Event

(1) You can directly use

Analysis: For an onclick (or other such as onblur) attribute of a dom element, it is owned by the html element and directly writes this in the function triggered by it, this should point to this html element.

(2) Register js functions for dom elements
A. Incorrect Method