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

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

Méthode d'écriture

Plus formelle

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)

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
}

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 ==

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

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

et vous constaterez qu'il est analysé en

sans

var data = function data() {
  name: 'hello';
};

Comparez l'exemple de

avec. return 4

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

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

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

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

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

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

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)

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;

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

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

Aucun prototype

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

L'ordre d'analyse est affecté

var Foo = () => {};
console.log(Foo.prototype); // undefined

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!