Explication détaillée de la fonction flèche JavaScript (tutoriel graphique)

Cet article explique en détail les connaissances de base des fonctions fléchées dans Javascript ES6 du point de vue d'un débutant. ES6 peut utiliser des "flèches" pour définir des fonctions. Notez qu'il s'agit de fonctions. N'utilisez pas cette méthode pour définir des classes (constructeurs). )

Afin de garantir la lisibilité, cet article utilise une traduction libre plutôt qu'une traduction littérale. De plus, les droits d'auteur de cet article appartiennent à l'auteur original et la traduction est uniquement destinée à l'apprentissage.

Dans cet article, nous présentons les avantages de la fonction flèche.

Syntaxe plus concise

Définissons d'abord la fonction selon la syntaxe conventionnelle :

function funcName(params) {
  return params + 2;
 }
funcName(2);
// 4

Cette fonction utilise des fonctions fléchées et peut être réalisée avec une seule ligne de code !

var funcName = (params) => params + 2
funcName(2);
// 4

N'est-ce pas cool ! Bien qu’il s’agisse d’un exemple extrêmement concis, il illustre bien les avantages des fonctions fléchées lors de l’écriture de code. Examinons de plus près la syntaxe des fonctions fléchées :
(parameters) => { statements }

S'il n'y a pas de paramètres, cela peut être encore simplifié :
() => { statements }

S'il y a n'est qu'un paramètre, les parenthèses peuvent être omises :
parameters => { statements }

Si la valeur de retour n'est qu'une seule expression (expression), vous pouvez également omettre les accolades :
parameters => expression

// 等价于:
function (parameters){
 return expression;
}

Maintenant que vous avez appris. Maintenant que nous connaissons la syntaxe des fonctions fléchées, essayons-la en pratique. Ouvrez la console du développeur du navigateur Chrome et saisissez :
var double = num => num * 2

Nous lions la variable double à une fonction de flèche, qui a un paramètre num et renvoie num * 2. Appelez cette fonction :

double(2);
// 4

double(3);
// 6

Aucune liaison de this local

Contrairement aux fonctions ordinaires, les fonctions fléchées ne lient pas this. En d’autres termes, la fonction flèche ne modifiera pas la liaison originale de celui-ci.

Nous utilisons un exemple pour illustrer :

function Counter() {
 this.num = 0;
}
var a = new Counter();

Parce que le mot-clé new est utilisé pour construire, celui-ci dans la fonction Count() est lié à un nouvel objet et affecté à a. Imprimez

a.num ，会输出0。 
console.log(a.num);
// 0

via console.log Si nous voulons augmenter la valeur de a.num de 1 chaque seconde, comment y parvenir ? Vous pouvez utiliser la fonction setInterval().

function Counter() {
 this.num = 0;
 this.timer = setInterval(function add() {
  this.num++;
  console.log(this.num);
 }, 1000);
}

Jetons un coup d'œil au résultat :

var b = new Counter();
// NaN
// NaN
// NaN
// ...

Vous constaterez qu'un NaN est imprimé chaque seconde au lieu du nombre accumulé. Qu'est-ce qui n'a pas fonctionné ?

Utilisez d'abord l'instruction suivante pour arrêter l'exécution continue de la fonction setInterval :
clearInterval(b.timer);

Essayons de comprendre pourquoi l'erreur s'est produite : selon les règles expliquées dans le précédent blog, d'abord la fonction setInterval n'a pas été appelée Lors de l'appel d'un objet déclaré, le mot-clé new n'est pas utilisé, et bind, call et apply ne sont pas utilisés. setInterval est juste une fonction normale. En fait, ceci dans setInterval est lié à l'objet global. Nous pouvons le vérifier en imprimant ceci :

function Counter() {
 this.num = 0;
this.timer = setInterval(function add() {
  console.log(this);
 }, 1000);
}
var b = new Counter();

Vous constaterez que tout l'objet fenêtre est imprimé. Utilisez la commande suivante pour arrêter l'impression :
clearInterval(b.timer);

Retour à la fonction précédente, NaN est imprimé car this.num est lié au num de l'objet window et window.num n'est pas défini.

Alors, comment résoudre ce problème ? Utilisez les fonctions fléchées ! L'utilisation de fonctions fléchées n'entraînera pas sa liaison à l'objet global.

function Counter() {
 this.num = 0;
 this.timer = setInterval(() => {
  this.num++;
  console.log(this.num);
 }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

Cette liaison via le constructeur Counter sera conservée. Dans la fonction setInterval, cela pointe toujours vers notre objet b nouvellement créé.

Afin de vérifier ce que nous venons de dire, nous pouvons lier ceci dans la fonction Counter à cela, puis déterminer si ceci et cela sont identiques dans setInterval.

function Counter() {
 var that = this;
 this.timer = setInterval(() => {
  console.log(this === that);
 }, 1000);
}
var b = new Counter();
// true
// true
// ...

Comme nous nous y attendions, la valeur imprimée est vraie à chaque fois. Enfin, terminez l'impression de l'écran :
clearInterval(b.timer);

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Vue.jsExplication détaillée du calcul et de l'utilisation des propriétés des auditeurs

Résumé de trois façons de charger dynamiquement des fichiers JS

jsRésumé des méthodes inter-domaines prenant en charge les demandes de publication

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!