Maison > interface Web > js tutoriel > le corps du texte

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

黄舟
Libérer: 2017-06-04 10:28:04
original
2108 Les gens l'ont consulté

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
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. Regardons de plus près la syntaxe des fonctions fléchées :

(parameters) => { statements }
Copier après la connexion

S'il n'y a pas de paramètres, cela peut être encore simplifié :

() => { statements }
Copier après la connexion

S'il y a n'est qu'un paramètre, les parenthèses peuvent être omises :

parameters => { statements }
Copier après la connexion

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

var double = num => num * 2
Copier après la connexion

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
Copier après la connexion

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();
Copier après la connexion

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
Copier après la connexion

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

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
// ...
Copier après la connexion

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!