How to use this in ES6 arrow functions

This time I will bring you the ES6 arrowHow to use this in the function, the use of this in the ES6 arrow functionWhat are the precautions, the following is a practical case, one Get up and take a look.

Brief introduction: 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 defining the function. Instead of binding when executing the function.

(1) The general function this points to is bound during execution. When running obj.say(), this points to the object of obj.

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=11function test1(){  this.a=22;  let b=function(){
    console.log(this.a);
  };
  b();
}var x=new test1();
输出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 from this in the parent execution context. It should 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 there is a mechanism to bind this inside the arrow function. The actual reason is that the arrow function does not have itself at all. This causes the internal this to be 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 transformation in ES5:

// ES6function foo() {
  setTimeout(() => {    console.log('id:', this.id);
  }, 100);
}
// ES5function foo() {  var _this = this;  setTimeout(function () {    console.log('id:', _this.id);
  }, 100);
}

So when defining an object, define the objectproperties, and this inside usually points to the global world. Or this in the environment where this object is located.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Summary of the experience of using python Django in development

##ES6 module syntax loading import export

How to use getBoundingClientRect() to achieve scrolling fixation of div container

The above is the detailed content of How to use this in ES6 arrow functions. For more information, please follow other related articles on the PHP Chinese website!