ES6 of this Detailed

1. Non-arrow under this function 

There obj = {
            x: 0,
            f1: function () {
                console.log(this.x);
            }
        }
        where f1 = obj.f1;
        where x = 1 ;

        obj.f1(); //0
        f1(); //1

The above code, although obj.f1 f1 and pointing to the same function, but the result of the execution is not the same. The reason for this difference lies in the body of the function uses this keyword. As we all know, this refers to the environment where the function is running. For obj.f1 () is, f1 runs in obj environment, so this point obj; for () is F1, f1 () running in the global environment, so that this refers to the global environment. Therefore, the results of the two are not the same.

Now let's think about it, why is this so? Why obj.f1 () obj environment is performed, and after var f1 = obj.f1, f1 () is executed in the global environment?

Then from memory data structures inside talking about, step by step, we look at.

There obj = {
            x: 0,
            f1: function () {
                console.log(this.x);
            }
        }

The above code will be assigned to a variable of an object obj, javascript engine will be first in memory to produce an object, then the object memory address assigned to the variable obj. In other words, the variable obj is an address. To read back obj.x, get the obj engine first memory address and then read out the address from the original object, returns the x property.

As shown above, each object are a property name corresponds to a property description object, attribute value stored in the value inside the object Attribute Description.

When the attribute value is a function, the engine will function individually stored in memory , then the address assignment function f1 to the attribute property value. Since the function is a single value, it can be performed in a different environment (context) .

We can inside the function, refer to the current environment of other variables. So, how to get inside a function of the current operating environment it? The answer is that the this, the this is designed to function within that body, to refer to the function of the current operating environment.

Now we can answer the initial question, obj.f1 () is to find f1 by the address stored in obj, it is performed under obj environment; and after var f1 = obj.f1, f1 () directly to the function itself Therefore f1 () is executed in the global environment.

2. The arrows in this function

Arrow functions do not create their own this, it will only inherit this one from their scope chain. This function causes the arrow always points to the object where the function definition to take effect.

function the Timer () {
     the this .s1 = 0 ;
     the this .s2 = 0 ;
     // arrow function 
    the setInterval (() => the this .s1 ++, 1000 );
     // common function 
    the setInterval ( function () {
         the this .s2 ++ ;
    }, 1000);
}
was h = new Timer ();
setTimeout(() => console.log('s1: ', timer.s1), 3100);  //s1:  3
setTimeout(() => console.log('s2: ',timer.s2), 3100);   //s2:  0

In the above code, the two internal timers Timer function is provided, respectively, using the arrow function and a normal function. Scope (i.e., the Timer function) when the binding is defined where this function arrows, where the scope of this ordinary function running point (i.e., global object). var timer = new Timer () statement is executed after this, another 1000 ms, function definitions commencement arrow, always points where the this function definition commencement objects, i.e. Timer; ordinary function, because setTimeout()the code running in the host function calls on completely separate execution environment, which can lead to this point to the window object. So, after 3100 milliseconds, timer.s1 been updated three times, and never once timer.s2 update.

Arrow function, this object point is fixed. Such immobilization point, because the actual arrow is no own this function, this is leading to the interior of this outer code block. It is precisely because it does not have this, so it can not be used as a constructor.

        var name = 'window, that' ;
        var A = {
            name : 'A',
            show: () => {
                console.log(this.name);
            }
        }
        A.show();　　//window

As a function of the above code by an arrow, i.e., no internal show this function, it is this layer inside this block, since no other functions of the parcel, so that this outermost points of the code block is window object. So eventually the output window.

So, how it changed forever bind A?

        var name = 'window, that' ;
        var A = {
            name: 'A',
            show: function() {
                var s = () => console.log(this.name);
                return s;
            }
        }
        each show = A.show ();
        show (); // where A 
        var B is = {
            name: B
        }
        show.call(B);   //A
        show.call();    //A

This did always point to the object A, let's analyze:

Original code show that is a function of the arrow, do not own this; the code after revision, the scope of the arrow function where the function is in the show, show is a normal function, have their own this, take effect at the time of the function call. A.show () object pointed to is A. Therefore arrow s in this function it is the point A.