Introduction à l'utilisation des fonctions fléchées JavaScript

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 :
[code ](parameters) => { déclarations }[/code]S'il n'y a pas de paramètres, cela peut être encore simplifié :

() => { statements }

S'il n'y a qu'un seul paramètre, vous pouvez omettre les parenthèses :

parameters => { statements }

Si la valeur de retour n'a qu'une seule expression (expression), vous pouvez omettez également les accolades :

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

Maintenant que vous avez appris la syntaxe des fonctions fléchées, pratiquons-la. 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

Pas de liaison locale this
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, ceci dans la fonction Count() est lié à a Nouvel objet et attribué à a. L'impression de a.num via console.log affichera 0.

console.log(a.num);
// 0

Si l'on veut 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, et non un nombre cumulatif. 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 blog précédent, d'abord la fonction setInterval n'a pas été déclarée par un certain. L'appel de l'objet n'utilise pas le mot-clé new, 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, la raison pour laquelle NaN est imprimé est parce que this.num est lié au numéro du 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);

Résumé

1. Le code d'écriture de la fonction flèche a une syntaxe plus concise ;

2. ne liera pas cela.

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!