Es6 arrow function this points to the problem

Point of this in es5

var factory = function(){   this.a = ‘a‘;   this.b = ‘b‘;   this.c = {        a:‘a+‘,        b:function(){return this.a}    }  };console.log(new factory().c.b());  // a+

Through es5 syntax call, the returned result is a +, and this points to the object called by the function, that is, who this points to when the function is called, which object calls this function? Who is this.

Point of the arrow function this in es6

var factory = function(){   this.a = ‘a‘;   this.b = ‘b‘;   this.c = {        a:‘a+‘,        b:() => {return this.a}    }  };console.log(new factory().c.b());  // a

In the arrow function body, this points to the point of this when it is defined. When defining function B, this in function B points to this in the factory function body, and this in the factory function body points to the instance of this constructor, in this instance, a is equal to 'A'. Although it is the called B object, this B object points to this instance.

This Of the arrow function points to: When the arrow function is defined, the point of this in the executor context (which does not have a block-level scope) will take this in the scope chain of the current function, ignore this in block-level scope

 

1.

var x=11;var obj={  x:22,  say:function(){    console.log(this.x)  }}obj.say(); //22

The general definition function is the same as our understanding. It determines the point of this when running. We can know that when running obj. Say (), this points to the object obj.

2.

var x=11;var obj={ x:22, say:()=>{   console.log(this.x); }}obj.say()；//11

This in the es6 arrow function is bound when it is defined, that is, this inherits from the parent execution context !! Such as this in the arrow function. x, the arrow function itself and the say level are in the form of key: value, that is, the object where the arrow function itself is located is OBJ, and the parent execution context of obj is window, so here this. X actually represents window. x, so the output is 11. (This is available only when the function is called or in the form of the new object () constructor)

3.

var a=11function test1(){  this.a=22;  let b=function(){    console.log(this.a);  };  b();}var x=new test1();//11

var a=11function test1(){  this.a=22;  let b=function(){    console.log(this.a);  };  b();}test1();//22

Arrow function:

var a=11;function test2(){  this.a=22;  let b=()=>{console.log(this.a)}  b();}var x=new test2();//22

The specific meaning of binding this when defined in es6 should inherit this in the parent execution context, and should not be the parent execution context !!!

Simple objects (non-Functions) have no execution context!

In the arrow function, this is not fixed because the arrow function has a mechanism to bind this internally. The actual reason is that the arrow function does not have its own this, as a result, this is the outer code block. Because it does not have this, it cannot be used as a constructor.

Es6 arrow function this points to the problem