What does this point to in the es6 arrow method?

In es6, the this object in the arrow function body is the object pointed to by the scope in which the function is defined. The point of this in the arrow function is the point of the object in the context. Occasionally, if there is no context object, this points to the window; even call, apply, bind and other methods cannot change the point of this of the arrow function.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

I believe that the arrow function is used in many places in daily development, because it is very concise and highly readable, but its biggest advantage is actually that it solves the problem of this pointing of anonymous functions. Convenient to encapsulate callback functions.

Let’s summarize first:

The this object in the arrow function body is the object pointed to by the scope where the function is defined, not the scope pointed by when it is used. object.

This

• (1) in the ES6 arrow function defaults to the this point of the object in the context when it is defined. That is, the point of this in the ES6 arrow function is the point of the object in the context. Occasionally, if there is no context object, this will point to window

• (2) Even call, apply, bind and other methods cannot Change the pointing of the arrow function this

The following is an example of an ordinary function:

var name = 'window'; // 其实是window.name = 'window'

var A = {
   name: 'A',
   sayHello: function(){
      console.log(this.name)
   }
}

A.sayHello();// 输出A

var B = {
  name: 'B'
}

A.sayHello.call(B);//输出B

A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

As you can see from the above, the sayHello method is defined in the A object, Dangdang We use the call method, point it to the B object, and finally output B; it can be concluded that the this of sayHello is only related to the object when used.

Renovate:

var name = 'window'; 
var A = {
   name: 'A',
   sayHello: () => {
      console.log(this.name)
   }
}
A.sayHello();// 还是以为输出A ? 错啦，其实输出的是window

I believe that most students will make mistakes here, thinking that sayHello is bound to A, but in fact it is bound to window, so what exactly is it? why?

At the beginning, I focused on "the object pointed to by the scope of this function". The scope refers to the inside of the function. The arrow function here, which is sayHello, is actually the outermost scope. js environment, because there are no other functions wrapped; then the object pointed to by the outermost js environment is the winodw object, so this here points to the window object.

How to change it to bind A forever:

var name = 'window'; 

var A = {
   name: 'A',
   sayHello: function(){
      var s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

var sayHello = A.sayHello();
sayHello();// 输出A 

var B = {
   name: 'B';
}

sayHello.call(B); //还是A
sayHello.call(); //还是A

OK, this will always point to the A object, we will then use "the object pointed to by the scope where the function is located" Analyze:

• The scope of this function: The scope of arrow function s is sayHello, because sayHello is a function.

• The object pointed to by the scope: A. The object pointed to by sayHello is A.

So this in the arrow function s points to A~~

----------------finish--- ----------

Finally, there are a few other points to note when using arrow functions

• cannot be used as a constructor, that is to say , the new command cannot be used, otherwise an error will be thrown.

• The arguments object cannot be used, as the object does not exist in the function body. If you want to use it, you can use the rest parameter instead.

• The yield command cannot be used, so arrow functions cannot be used as Generator functions.

[Recommended learning: javascript video tutorial]

The above is the detailed content of What does this point to in the es6 arrow method?. For more information, please follow other related articles on the PHP Chinese website!