Answer to this question on ES6 Arrow Functions

This in the arrow function points to a function defined differently from the general function. The definition of this in the arrow function: this in the arrow function is bound when the function is defined, not when the function is executed.

(1) Generally, the function this points to is bound during execution. When obj.say() is run, this points to the obj object.

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

(2) The so-called binding at definition time means that this is inherited from the parent execution context! ! This, such as this. 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();
//输出的值为11

Similar ones include:

(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 situation:

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

It’s strange, isn’t it? This is how I understand it. The specific meaning of binding this when defined in ES6 should be inherited. It is this in the parent execution context. It must not be the parent execution context! ! ! In this way, many unclear directions in arrow functions are solved.

Note: Simple objects (non-functions) have no execution context!

In-depth understanding of this in the arrow function

In the arrow function, the fixation of this point is not because of the internal arrow function There is a mechanism to bind this. The actual reason is that the arrow function does not have its own this at all, so the internal this is the this of the outer code block. Precisely because it does not have this, it cannot be used as a constructor.

We can simulate the arrow function conversion 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, define the object properties, and this inside points to the general It is global, or this in the environment where this object is located.

Related recommendations:

Analysis of the use of arrow functions in ReactJs

Introduction to the use of JavaScript arrow functions

Code examples that explain the difference and usage of ordinary functions and arrow functions in JavaScript

The above is the detailed content of Answer to this question on ES6 Arrow Functions. For more information, please follow other related articles on the PHP Chinese website!