The understanding of this in JS

Usually with this many, the understanding of this is that this is the corresponding execution environment, but many times the effect is not wanted, recently read some of the notes and books about this, summarized under.

A misunderstanding of this:

This is the pointer to the function itself

Let's start with the demo.

1 var a =0; 2     demo.a=2; 3     function Demo () {4         console.log (' OK '); 5         this. a++6    }7    demo ();//ok8     Console.log (DEMO.A);//2 9     Console.log (a); 1

The above demo has learned that if this is a pointer to the function itself, then the value of DEMO.A should be 3, but still 2 indicates that the call is not a demo function.

The A of the Window object is incremented, indicating that this in the demo function points to the window (and so on.)

This is bound at the time of invocation, depending on where the function is called (and the method is called):

1. Default bindings:

The most common is also a function call type, when there is only one independent function, this is pointing to the Window object (explaining why Console.log (a) is 1 in the above example).

Note: when using strict mode, this will bind to the undefined

2. Implicit binding

The location of the function call has a context (I understand that the function is a method of an object invocation pattern;

var obj1={
    A:2,
    Demo:demo
};
var obj={
    A:1,
    Obj1:obj1
};
Function Demo () {
    Console.log (THIS.A)
}
Obj.obj1.demo ()//2

When the execution environment of the function is in the Obj object, this point is obj. If a few layers of objects are wrapped, this will only bind to the last layer of the object (this is finally bound to obj1 on the demo above)

Note:1. Sometimes we do not write so long a string of Obj.obj1.demo, but to assign a variable, but also to achieve the effect we want?

1     varA =02     varobj1={3A:2,4 Demo:demo5     };6     varobj={7A:1,8 obj1:obj19     };Ten     functionDemo () { OneConsole.log ( This. A) A     } -Obj.obj1.demo ();//2 -     varfn=Obj.obj1.demo; theFN ();//0 -OBJ.DD =Obj.obj1.demo; -OBJ.DD ()//1

When I assign Obj.obj1.demo to FN, I execute FN (), and the result is 0.why? As we said above, FN () can be understood as a standalone function (without any modifiers), where this is a pointer to window, or a=0.

I think I can understand that. The this in the function depends on the object that invokes the function on the previous level (that is, the last level mentioned above).

As above: Obj.dd = Obj.obj1.demo, then executes OBJ.DD (), the result is 1, that is, now the function in which your this is bound is the Obj object. Similarly, the FN () is actually WINDOW.FN (), which binds to the Window object

3. Show Bindings

The display binding is simply bound to the desired object by Apply,call,bind, directly from the function

Let's see the demo first.

1     varobj1={2A:2,3 Demo:demo4     };5     varobj={6A:1,7 obj1:obj18     };9     functionDemo () {TenConsole.log ( This. A) One     } A Obj.obj1.demo ();//2 - Obj.obj1.demo.call (obj);//1 -     varfn=obj.obj1.demo.bind (obj); theFN ()//1

A brief introduction to the Apply call bind. Apply and call is a function built-in method, the first parameter is to specify the function execution environment, the second parameter is passed to the function parameters, call is to pass the parameters to the function, apply is to combine the parameters in an array, the array to the function,

Bind also specifies the execution environment, but does not execute (when using call and apply, the function executes)

According to the above, the result of normal Obj.obj1.demo () is 2, but the value of a is 1 after using the obj with this binding on call. The later use of BIND is the same (only function is not executed, need to be executed once)

4. Constructor mode

Create an instance of a constructor that is bound to this instance object

1     function Per () {2        this. A=13    }4     varnew  Per (); 5     // 1

DD is an instance of per, this binds to the DD and creates a property A of DD with a value of 1

This article concludes with a "javascript you don't Know"

The first time to write a blog, typesetting a bit messy, are some personal understanding, there are questions welcome to shoot bricks.

The understanding of this in JS