The This in JavaScript

Here are some simple examples to summarize some of the uses of this:


1. The This in the method points to the object that is currently executing the method, such as:

var name = "Window"var tom = {  name:"Tom";  Show:function() {alert (this. Name)}}tom.show ();    // Tom

2. The This in the method does not point to the object that declares it

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

Because although alert (this.name) is declared in the Bob object environment


But the method is called by the Tom Object, so this will always point to the currently executing object, not the declared object





3. When you copy a method to a variable, the method is still called in the Tom Object area when it is executed

var name= "window"; var tom={  name:"Tom".  Show:function() {alert (this. Name)}  }; var fun=tom.show (); fun ();               // Tom

You can see that the assignment is called again, and it does not affect the object that invokes its method

4. The following is an indication of the object that called the function

var name= "window";  var tom={  name: "Tom", Show:function () {alert (this. Name)}, wait:functionvar that= This //Tom           

Here, this assigns the currently executing object and lets it continue to call show,

So alert (this.name) naturally points to Tom in the Show method.

You can take the "that assignment object and then call the method" process to see the execution object.

The delay is to let Tom work overtime meaning
 

 

 5. Another way to specify an object that invokes a method is as follows:

 var name = "Window" ; var bob= {name: "Bob" , show : function () {alert (thisvar tom= {name: "Tom" }; Bob.show (); //bob Bob.show.apply  ();  //window Bob.show.apply  (Tom);  //tom         

Of course call () is almost similar

 

6. Here's a special example

var name= "window"; var tom={  name:"Tom",  Show:function() {alert (this. Name)},  Wait:function() {             var fun=this. Show;             Fun ();         }  }; Tom.wait ();   // window

The above is also the assignment method, and then called, but the executed object is changed to the Window object

Explain:

Assigning a method to a variable in the body of a function causes the object to change to the Window object

When a fun is performed, it can be seen as a deferred behavior of a method call, and delaying the calling method causes the object to execute

becomes a global object, which is the Window object


Let's take a look at several other ways of delaying, which causes the object to be changed to window example



7. Delay of anonymous functions

var name= "window"; var tom={  name:"Tom",  Show:function() {alert (this. Name)},  Wait: function (){! function (call) {call ();} (this. Show)}  } Tom.wait ();     // Window

8.setTimeout, setinterval function delay
This is just an example of settimeout.

var name= "window"; var tom={  name:"Tom",  Show:function() {alert (this. Name)},  Wait: function () {setTimeout (this. show,1000)}  } tom.wait ();     // window

9. Try to get Tom to work overtime in a delayed environment (objects are also delayed)

 var name= "window"; var tom={  Name: "Tom", show:function() {alert (this. Name)},wait:function () {setTimeout (tom.show,1000)}  }tom.wait ();     //  

The This object above changed to Tom, trying to get Tom to work overtime, but the result is still the window object

Because Tom.show is placed in the first argument, deferred execution causes the executed object to become a Window object

Instead of being the Tom object, how do you get the execution object Tom to delay when not being changed? Here's your answer.

10. Although the delay causes the execution object of the method to be changed to window, there are ways to prevent the execution of object changes as follows

var name= "window"var  tom ={      "Tom",      function() {alert (  This . name);},      wait:  function() {    var that= This ;    SetTimeout (function() {that.show ()},1000)}            }tom.wait ();     //

If you don't understand the code above, you'll just have to defer to the function with the Tom object as well.

The 9th example does not have a successful delay because there is no variable to save the object so that the execution object does not follow the delay





Delay of 11.eval function

Special for Eval

In the eval environment, the object being executed is the current scope object as follows

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

Objects that affect function execution in the context of a 12.eval function without being delayed

The reason for Eval is special because eval is not affected by delays

var name= "window"; var that ; var tom={  name:"Tom",  Show:function() {alert (this. Name)},  Wait: function () {that=this; SetTimeout ("That.show ()", +)}  } tom.wait ();     // Tom

You might think that the code above doesn't have the Eval function figure.

In fact, the first parameter of the SetTimeout function is the eval environment

He will point to the executing object of the current execution scope, ignoring the deferred method deferred call

If you can understand the above 12 examples, then this will be your powerful knife, waving in your father's code

Of course, if you do not understand, then as close as possible to use less!

The This in JavaScript