Another angle to look at this in JavaScript

Tag: Parameter Targe also has the Execute on () name of this call. com

This article tries to avoid the conceptual explanation, which is too abstract

So here are some simple examples, from easy to difficult to summarize the usage 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() {   Console.log (this + ":" +this. Name)   //Tom

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

var bob={  name:"Bob",  Show:function() {  Console.log (this + ") : "+this.  name"var tom={   name:"Tom",      Tom

Although Console.log is declared in the Bob object environment, the method is called by the Tom object to execute

So this will always point to the currently executing object, not the declared object

The essential reason is that the Bob.show method assigns a value to the Tom.show method and does not bind the Bob object to the past.

Here is an example of binding an object to the past

3. In a nested object, this points to the object that directly binds it

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

4. The execution result of the method is saved with a variable, and the object is still Tom

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

The fun assignment here is the result of the execution of the Tom.show function, which is Tom

The above example is actually a comparison of the following

5. Save the contents of the method with a variable, whose execution object is window

var name= "window"; var tom={  name:"Tom",  Show:function() {      Console.log (this + ":" +this. Name)  }};fun=tom.show;fun ();               // Window

Because the fun assignment is just the content of the method and is not bound to the Tom object, the fun execution object is the Window object

 

 6. If the object that invokes the method is indicated, this will point to the object that called it:

var name = "Window"; var bob= {    name:"Bob",    Show:function() {Console.log (this. name);}     var tom= {name: "Tom"}; Bob.show ();                    // Bob Bob.show.apply ();             // window Bob.show.apply (Tom);          // Tom

Of course call () is similar, and apply and call are used to indicate which object to execute the method

7. When the function is a constructor, this points to the newly created object, as follows

function Tom (name,age) {  this. name=name;      this. age= age;   this. getinfo=function() {      Console.log (this. name+ ' is ' + this  . Age)   }}varnew Tom ("Bob",); Bob.getinfo ();   // Bob is

Let's get something in order!!!

The following example requires two important concepts to explain the general principles

Deferred execution!

Deferred call!

8. After assigning the object to the variable, the method is called, and the object is still Tom

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

Because show is bound to that object, and that value is the object Tom, the object being executed points to Tom

" Save the object to a variable and then call the method", this process is called deferred invocation, if you don't understand It's okay

Then look down.

9. In the context of a function, if there is no object indicating the execution method, then the Global object window will execute

var name= "window";  var tom={  name: "Tom", Show:function () {Console.log (this.name)}, wait:functionvar fun= This //window         

The fun assignment is the content of the method and is not bound to the Tom object, so the object being executed is the window

The " assign a method to a variable, then call" process can be seen as deferred execution

Delaying the execution of the method causes the method to lose the binding of the object, causing the object to be executed by window

Here are some examples of deferred calls

10. Delay of anonymous functions

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

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

var name= "window";  var tom={  name: "Tom", Show:function () {Console.log (this. Name)}, wait:function () { SetTimeout (this.show,1000//window          

From the above two examples, it can be concluded that deferred execution causes the object executing the method to change to the Global object window

So how to prevent this change, let's try the following trick

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

var name= "window";  var tom={    name: "Tom", Show:function () {Console.log (this. Name)}, wait:function () { SetTimeout (tom.show,1000//          

This will directly indicate 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, it is equivalent to saving this method in a variable.

It then executes the variable after a delay, while the save is still not bound to the object Tom, so the object executed is still window

This and the 9th example above is a reasonable one. Called deferred execution, but this time the deferred execution is using settimeout to implement

Then is there no way to avoid delaying the execution of the method causing the execution object to be changed? Not too!

Let the object also follow the delay can be done! As follows

13. 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 ={      name: "Tom",      function () {Console.log (thisfunction var that=this; SetTimeout (function () {that.show ()},1000//     

Save the object through a variable, and then use the variable to invoke the method, to achieve the execution of the object also follows the effect of delay

Delay of 14.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 ("Console.log (this.name)"//     

Objects that affect function execution in the context of a 15.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 () {Console.log (this. Name)}, wait:function () {that= this;settimeout ("That.show ()", +//             

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

Click below to see how the field plan is for JavaScript.

Http://www.cnblogs.com/wilber2013/p/4909505.html

Can understand the above example, then this is a beneficial knife!

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

Another angle to look at this in JavaScript