Explication détaillée de la fonction flèche JavaScript

Cet article explique en détail les connaissances de base de Javascript Flèche fonction (Fonctions fléchées) dans ES6 du point de vue d'un débutant ES6 peut utiliser "flèche" pour définir des fonctions. . , notez qu'il s'agit d'une fonction, n'utilisez pas cette méthode pour définir une classe (constructeur)

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. Regardons 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 est une seule expression(expression), vous pouvez également omettre 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 de développement du navigateur Chrome et saisissez :

var double = num => num * 2

Nous allons lier la variable double à une fonction flèche, qui a un paramètre num , 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.

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 attribué à 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 d'un 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 :
<a href="http://www.php.cn/wiki/917.html" target="_blank"> clear<code><a href="http://www.php.cn/wiki/917.html" target="_blank">clear</a>Interval(b.timer);Interval(b.timer);

Essayons de comprendre pourquoi l'erreur s'est produite : Selon les règles expliquées dans le blog précédent, tout d'abord, la fonction setInterval n'a pas été appelé par un objet déclaré, et le mot-clé new n'est pas utilisé, et bindall 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
// ...

ce lié par le constructeur Counter sera conservé. 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 La fonction flèche a une syntaxe plus concise pour écrire du code

2. Cela ne sera pas lié.

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!