Maison > interface Web > js tutoriel > Analyse des fonctions fléchées dans ES6 (avec exemples)

Analyse des fonctions fléchées dans ES6 (avec exemples)

不言
Libérer: 2018-11-14 15:24:40
avant
2443 Les gens l'ont consulté

Le contenu de cet article concerne l'analyse des fonctions fléchées dans ES6 (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu

La fonction flèche a deux fonctions :

  1. Manière d'écriture plus courte

  2. Non relié Définir ceci

Table de grammaire

()=>{}
()=>{console.log('arrow');return null}
()=>'hello'
(num1, num2)=>num1+num2
num=>++num
()=>({name:'arrow'})
Copier après la connexion

Méthode d'écriture

Plus formelle

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)
Copier après la connexion

déclare une variable d'ajout, ceci variable est une fonction d'addition, cette fonction a deux paramètres formels : num1, num2, et la valeur de retour est le résultat de l'addition de ces deux paramètres

Paramètre unique

let  increment = num=>{
    return num + 1
}
Copier après la connexion

Déclaré ci-dessus Une variable d'incrémentation est obtenue, qui est une fonction d'auto-incrémentation. Le paramètre n'a qu'un seul paramètre formel num, et la valeur de retour est le paramètre qui s'incrémente de 1. Comme il n'y a qu'un seul paramètre, le ()

Aucun paramètre

let now = () => {
    return Date.now()
}
let now==>{} // Uncaught SyntaxError: Unexpected token ==
Copier après la connexion
Une variable now est déclarée ci-dessus, qui est une fonction qui peut obtenir l'horodatage actuel. Puisqu'aucun paramètre n'est requis, la liste des paramètres est. laissé vide, mais dans ce cas ( ) est omis, sinon cela entraînera une erreur de syntaxe

Valeur de retour unique

let now = () =>  Date.now()
Copier après la connexion
La fonction ci-dessus peut également être abrégée comme suit, car la le corps de la fonction n'a qu'une seule phrase, donc

et {}returnValeur de retour unique : renvoyer le littéral de l'objet

Bien que les fonctions fléchées puissent omettre {} et renvoyer, vous devez prêter une attention particulière lorsque renvoyant un objet littéral. S'il est écrit comme suit, bien qu'aucune erreur ne soit signalée lors de la vérification de la syntaxe, mais elle peut être différente de ce que vous attendez. Par exemple, ici, les données que vous souhaitez obtenir sont {name:'hello. '}, mais le résultat n'est pas défini.


Pourquoi ? Utilisez babel pour analyser
let data=()=>{name:'hello'} // 不会报错 
console.log(data()) // undefined
Copier après la connexion

Analyse des fonctions fléchées dans ES6 (avec exemples) et vous constaterez qu'il est analysé en

sans
var data = function data() {
  name: 'hello';
};
Copier après la connexion
Comparez l'exemple de

avec. return 4

Analyse des fonctions fléchées dans ES6 (avec exemples)Donc, en fait, {name:'hello'} est analysé dans un corps de fonction, {} est le {} de la fonction, pas le {} du objet et nom : 'hello' Il est analysé en une instruction. Ce type d'instruction n'est pas couramment utilisé, mais il satisfait à la grammaire js. Il s'appelle une étiquette. Exemple :

Donc, si. la fonction flèche doit renvoyer un seul objet littéral, vous devez ajouter le
var str = "";

loop1:
for (var i = 0; i <p><code>()</code></p>Ne pas lier ceci<pre class="brush:php;toolbar:false">let data=()=>({name:'hello'})
Copier après la connexion

Regardez la situation suivante

Habituellement, nous espérons accéder aux variables Person dans la fonction de rappel de setInterval, comme age, mais chaque fonction nouvellement définie a son propre this, donc ici c'est this de growUp, pas celui de Person, ce qui fera que this.age sera undefined. Afin de résoudre ce problème, nous utilisons généralement une solution de compromis :
function Person() {
  this.age = 0;

  setInterval(function growUp() {
    console.log(this.age)
  }, 1000);
}

var p = new Person();
Copier après la connexion

Utilisez une variable temporaire pour contenir this et évitez d'utiliser this de growUp. À ce stade, c'est au tour de la fonction flèche :
function Person() {
  this.age = 0;
  var that=this
  setInterval(function growUp() {
    console.log(that.age)
  }, 1000);
}

var p = new Person();
Copier après la connexion

Dans la fonction flèche, ceci ne sera pas lié, c'est-à-dire qu'il n'a pas son propre ceci, donc à ce moment, son ceci est celui de la personne. C'est ce qu'on appelle la fonction flèche qui ne lie pas cela. À mon avis, la fonction de rappel est la meilleure destination pour la fonction flèche.
function Person() {
  this.age = 0;
  setInterval(()=> {
    console.log(this.age)
  }, 1000);
}

var p = new Person();
Copier après la connexion
Le résultat après l'analyse de Babel est en fait l'ancienne méthode :


Remarque
"use strict";

function Person() {
  var _this = this;

  this.age = 0;
  setInterval(function () {
    console.log(_this.age);
  }, 1000);
}

var p = new Person();
Copier après la connexion

La fonction flèche prend en charge les paramètres par défaut

La fonction flèche prend en charge le paramètres restants
let add = (num1 = 0, num2) => num1 + num2
Copier après la connexion

La fonction flèche prend en charge la déconstruction de la liste de paramètres
let add = (...numList) => numList.reduce((n1, n2) => n1 + n2)
Copier après la connexion

La fonction flèche ne prend pas en charge les arguments Si vous souhaitez utiliser des arguments, il est recommandé d'écrire les paramètres restants. comme ci-dessus
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
Copier après la connexion

Object .defineProperty() aura des effets inattendus
// 栗子1
var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1
// 栗子2
function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2
// 栗子3
function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 2
Copier après la connexion

Ne peut pas être utilisé avec new
'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});
Copier après la connexion

Aucun prototype
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
Copier après la connexion

L'ordre d'analyse est affecté
var Foo = () => {};
console.log(Foo.prototype); // undefined
Copier après la connexion

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:segmentfault.com
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