Introduction à l'utilisation des fonctions fléchées JavaScript-js tutoriel-php.cn

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

巴扎黑

Libérer： 2017-08-16 11:05:25

original

3062 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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 }

Copier après la connexion

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

parameters => { statements }

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Vous constaterez que tout l'objet fenêtre est imprimé. Utilisez la commande suivante pour arrêter l'impression :

clearInterval(b.timer);

Copier après la connexion

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
// ...

Copier après la connexion

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
// ...

Copier après la connexion

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