Analyse des fonctions fléchées dans ES6 (avec exemples)-js tutoriel-php.cn

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

不言

Libérer： 2018-11-14 15:24:40

avant

2409 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 :

Manière d'écriture plus courte
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!