Traditional Culture Encyclopedia - Traditional culture - Where does this point in the ES6 arrow function

Where does this point in the ES6 arrow function

This time to bring you the ES6 arrow function in the this points to where, the use of ES6 arrow function in the this what are the precautions, the following is the actual case, together with a look.

Brief introduction: this in the arrow function, pointing to the function defined with the general function is different from the definition of the arrow function this: this in the arrow function is bound in the definition of the function, rather than in the execution of the function time binding.

(1) General function this points to the execution is bound When running obj.say(), this points to the object obj.

var x=11;

var obj={

x:22,

say:function(){

console.log(this.x)

}

obj.say();

//console.log outputs 22 (2) What is meant by binding when defined is that this is inherited from the parent execution context! This.x in the arrow function here, for example, the arrow function itself is leveled with say in the form of key:value, that is, the object in which the arrow function itself is located is obj, and the parent execution context of obj is window, so this.x here actually represents window.x, so the output is 11.

var x=11;

var obj={

x:22,

say:()=>{

console.log(this.x);

}

obj.say();

//Output of value is 11 Similarly:

(3)

var a=11

function test1(){

this.a=22;

let b=function(){

console.log(this.a);

};

b();

}

var x=new test1();output 11

Arrow function case:

var a=11;

function test2(){

this.a=22;

let b=( )=>{console.log(this.a)}

b();

}

var x=new test2();

/// The output of 22 is strange right, I understand it this way, the specific meaning of binding this when defining in ES6, should be inherited is the parent execution context inside of this, never the parent execution context!!!! This solves a lot of the pointing ambiguity in arrow functions.

Note: Simple objects (not functions) do not have an execution context!

Deeper Understanding of this in Arrow Functions

The fixation of this pointing in an arrow function is not due to the fact that there is a mechanism for binding this inside the arrow function, but rather because the arrow function does not have its own this at all, resulting in the internal this being the same as the this of the outer block. it is precisely because it doesn't have a this that it can't be used as a constructor.

We can simulate the transformation of an arrow function in ES5:

// ES6

function foo() {

setTimeout(() => {

console.log('id:', this.id);

} 100);

}

// ES5

function foo() {

var _this = this;

setTimeout(function () {

console.log('id:', _this.id) )

}, 100);

}So when defining an object, defining the object properties, the this in it points to the general global, or this object is located in that environment of this this.

Believe that looking at the case of this article you have mastered the method, more exciting please pay attention to the other related articles on Gxl.com!