What should you pay attention to when using es6 arrow functions?

Notes: 1. The arrow function will change the point of this in the function to be consistent with the point of this in the superior scope; 2. It cannot be used as a constructor, that is, the new command cannot be used; 3. No The arguments object can be used; 4. The yield command cannot be used and cannot be used as a Generator function.

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

In the new syntax of es6, arrow functions appear.

ES6 allows the use of "arrows" (=>) to define functions.

		function fun(a){ return a; }
// ↓ 去掉 function 在 ( ) 和 { } 之间添加 => 
		var fun = (a) => { return a; }  
// ↓ 如果只有一个形参可省略 ( ) 如果一个形参都没有，必须加( )         
		var fun = a => { return a; }  
// ↓ 如果函数体只有一句话，可省略{ }，如果仅有的这句话还是 return， 则必须省略 return         
		var fun = a => a

Notes on arrow functions in ES6

(1) The arrow function will change the point of this in the function to be consistent with the point of this in the superior scope

The this object in the function body is the object where it is defined, not the object where it is used.

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

(3) 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.

(4) The yield command cannot be used, so arrow functions cannot be used as Generator functions.

Among the above four points, the first point is particularly noteworthy. The pointer of this object is variable, but in an arrow function, it is fixed.

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

In the above code, the parameter of setTimeout is an arrow function. The definition of this arrow function takes effect when the foo function is generated, and its actual execution will not wait until 100 milliseconds later. If it is a normal function, this should point to the global object window when executed, and 21 should be output at this time. However, the arrow function causes this to always point to the object where the function definition takes effect (in this case, {id: 42}), so the output is 42.
The arrow function can make this in setTimeout point to the scope where the binding is defined, rather than pointing to the scope where it is run. Here's another example.

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

In the above code, two timers are set up inside the Timer function, using arrow functions and ordinary functions respectively. The former's this binding is defined in the scope (i.e., Timer function), and the latter's this points to the scope in which it is run (i.e., the global object). So, after 3100 milliseconds, timer.s1 has been updated three times, but timer.s2 has not been updated once.

The arrow function can make this point fixed. This feature is very helpful for encapsulating callback functions. Below is an example where the callback function of a DOM event is encapsulated in an object.

var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

In the init method of the above code, an arrow function is used, which causes this in the arrow function to always point to the handler object. Otherwise, when the callback function runs, the this.doSomething line will report an error, because this points to the document object at this time.

The fixation of this pointing 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 its own this at all, causing 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.

So, the code for converting the arrow function into ES5 is as follows.

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

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

In the above code, the converted ES5 version clearly shows that the arrow function does not have its own this at all, but refers to the outer this.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What should you pay attention to when using es6 arrow functions?. For more information, please follow other related articles on the PHP Chinese website!