À quoi devez-vous faire attention lorsque vous utilisez les fonctions fléchées es6 ?

Remarques : 1. La fonction flèche modifiera le point de this dans la fonction pour être cohérent avec le point de this dans la portée de niveau supérieur ; 2. Elle ne peut pas être utilisée comme constructeur, c'est-à-dire que la nouvelle commande ne peut pas être utilisé ; 3. L'objet arguments ne peut pas être utilisé ;4. La commande rendement ne peut pas être utilisée et ne peut pas être utilisée comme fonction de générateur.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Dans la nouvelle syntaxe d'es6, des fonctions fléchées apparaissent.

ES6 permet l'utilisation de "flèches" (=>) pour définir des fonctions.

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

Notes sur les fonctions fléchées dans ES6

(1) La fonction flèche modifiera le pointage de this dans la fonction pour être cohérent avec le pointage de this dans la portée supérieure

L'objet this dans le corps de la fonction est l'objet où il est défini plutôt que l'objet dans lequel il est utilisé.

(2) ne peut pas être utilisé comme constructeur, c'est-à-dire que la nouvelle commande ne peut pas être utilisée, sinon une erreur sera générée.

(3) L'objet arguments ne peut pas être utilisé, car l'objet n'existe pas dans le corps de la fonction. Si vous souhaitez l'utiliser, vous pouvez utiliser le paramètre rest à la place.

(4) La commande rendement ne peut pas être utilisée, donc les fonctions fléchées ne peuvent pas être utilisées comme fonctions générateur.

Parmi les quatre points ci-dessus, le premier point est particulièrement remarquable. Le pointeur de cet objet est variable, mais dans une fonction flèche, il est fixe.

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

var id = 21;

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

Dans le code ci-dessus, le paramètre de setTimeout est une fonction flèche. La définition de cette fonction flèche prend effet lorsque la fonction foo est générée, et son exécution réelle n'attendra que 100 millisecondes plus tard. S'il s'agit d'une fonction normale, elle devrait pointer vers la fenêtre de l'objet global lors de son exécution, et 21 devrait être affiché à ce moment-là. Cependant, la fonction flèche fait que cela pointe toujours vers l'objet où la définition de la fonction prend effet (dans ce cas, {id : 42}), donc la sortie est 42.
La fonction de flèche permet à cela dans setTimeout d'être lié à la portée où il est défini, plutôt que de pointer vers la portée où il est exécuté. Voici un autre exemple.

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

Dans le code ci-dessus, deux minuteries sont configurées à l'intérieur de la fonction Timer, en utilisant respectivement les fonctions fléchées et les fonctions ordinaires. Le this du premier est lié à la portée où il est défini (c'est-à-dire la fonction Timer), et le this du second pointe vers la portée où se trouve le runtime (c'est-à-dire l'objet global). Ainsi, après 3 100 millisecondes, timer.s1 a été mis à jour trois fois, mais timer.s2 n'a pas été mis à jour une seule fois.

La fonction flèche peut corriger ce point. Cette fonctionnalité est très utile pour encapsuler les fonctions de rappel. Vous trouverez ci-dessous un exemple où la fonction de rappel d'un événement DOM est encapsulée dans un objet.

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);
  }
};

Dans la méthode init du code ci-dessus, une fonction de flèche est utilisée, ce qui fait que celle-ci dans la fonction de flèche pointe toujours vers l'objet gestionnaire. Sinon, lorsque la fonction de rappel s'exécute, la ligne this.doSomething signalera une erreur, car elle pointe vers l'objet document à ce moment-là.

La fixation de ce pointage n'est pas due au fait qu'il existe un mécanisme pour le lier à l'intérieur de la fonction flèche. La vraie raison est que la fonction flèche n'a pas du tout son propre ceci, ce qui fait que le ceci interne est le ceci de l'extérieur. bloc de code. C’est précisément parce qu’il ne possède pas cela qu’il ne peut pas être utilisé comme constructeur.

Donc, le code pour convertir la fonction flèche en ES5 est le suivant.

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

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

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

Dans le code ci-dessus, la version ES5 convertie montre clairement que la fonction flèche n'a pas du tout son propre this, mais fait référence au this externe.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!