Introduction aux fonctions fléchées en js

La fonction flèche est une expression de fonction abrégée, et elle a la valeur this de la portée lexicale (c'est-à-dire qu'elle ne créera pas de nouveaux objets tels que this, arguments, super et new.target dans sa propre portée). De plus, les fonctions fléchées sont toujours anonymes.

Grammaire de base

1. (param1, param2, …, paramN) => { statements }  
   (param1, param2, …, paramN) => expression  
            // equivalent to:  => { return expression; }  
     
   // 如果只有一个参数，圆括号是可选的:  
   (singleParam) => { statements }  
   singleParam => { statements }  
     
   // 无参数的函数需要使用圆括号:  
   () => { statements }

Grammaire avancée

1. // 返回对象字面量时应当用圆括号将其包起来:  
   params => ({foo: bar})  
     
   // 支持 Rest parameters 和 default parameters:  
   (param1, param2, ...rest) => { statements }  
   (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }  
     
   // Destructuring within the parameter list is also supported  
   var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;  
   f();  // 6

Description

L'introduction des fonctions fléchées a deux impacts : l'un est une écriture de fonction plus courte et l'autre est une analyse lexicale de celle-ci.

Fonctions plus courtes

Dans certains modèles de programmation fonctionnelle, les fonctions plus courtes sont populaires. Essayez de comparer :

1. var a = [  
     "Hydrogen",  
     "Helium",  
     "Lithium",  
     "Beryl­lium"  
   ];  
     
   var a2 = a.map(function(s){ return s.length });  
     
   var a3 = a.map( s => s.length );

ne lie pas ceci

Avant les fonctions fléchées, chaque fonction nouvellement définie avait la sienne La valeur this de le constructeur (par exemple, le this du constructeur pointe vers un nouvel objet ; la valeur this de la fonction en mode strict n'est pas définie ; si la fonction est appelée comme méthode de l'objet, son this pointe vers l'objet qui l'a appelé ) . En programmation orientée objet, cela peut s'avérer très ennuyeux.

function Person() {  
  // 构造函数 Person() 定义的 `this` 就是新实例对象自己  
  this.age = 0;  
  setInterval(function growUp() {  
    // 在非严格模式下，growUp() 函数定义了其内部的 `this`  
    // 为全局对象, 不同于构造函数Person()的定义的 `this`  
    this.age++;   
  }, 1000);  
}  
  
var p = new Person();

1. Dans ECMAScript 3/5, ce problème peut être résolu en ajoutant une variable pour pointer vers l'objet this souhaité, puis en plaçant la variable dans la fermeture.

2. function Person() {  
     var self = this; // 也有人选择使用 `that` 而非 `self`.   
                      // 只要保证一致就好.  
     self.age = 0;  
     
     setInterval(function growUp() {  
       // 回调里面的 `self` 变量就指向了期望的那个对象了  
       self.age++;  
     }, 1000);  
   }

De plus, vous pouvez également utiliser la fonction bind pour transmettre la valeur this souhaitée à la fonction growUp().

La fonction flèche capturera la valeur this de son contexte comme sa propre valeur this, donc le code suivant s'exécutera comme prévu.

1. function Person(){  
     this.age = 0;  
     
     setInterval(() => {  
       this.age++; // |this| 正确地指向了 person 对象  
     }, 1000);  
   }  
     
   var p = new Person();

Relation avec le mode strict

Considérant que cela se situe au niveau lexical, les règles liées à cela en mode strict sont être ignoré.

1. var f = () => {'use strict'; return this};  
   f() === window; // 或全局对象

Les autres règles du mode strict restent inchangées

Utiliser l'appel ou demander à appeler

Depuis cela. been La liaison est terminée au niveau lexical. Lors de l'appel d'une fonction via la méthode call() ou apply(), seuls les paramètres sont transmis, ce qui n'a aucun effet sur cela :

1. <span style="font-size:14px;">var adder = {  
     base : 1,  
         
     add : function(a) {  
       var f = v => v + this.base;  
       return f(a);  
     },  
     
     addThruCall: function(a) {  
       var f = v => v + this.base;  
       var b = {  
         base : 2  
       };  
                 
       return f.call(b, a);  
     }  
   };  
     
   console.log(adder.add(1));         // 输出 2  
   console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3 ——译者注）</span>

Arguments non liés

La fonction flèche n'exposera pas l'objet arguments qu'elle contient : arguments.length, arguments[0], arguments[1], etc., ne pointeront pas vers les flèches Les arguments de la fonction pointent vers une valeur nommée arguments dans la portée de la fonction flèche (le cas échéant, sinon elle n'est pas définie).

1. var arguments = 42;  
   var arr = () => arguments;  
     
   arr(); // 42  
     
   function foo() {  
     var f = () => arguments[0]; // foo's implicit arguments binding  
     return f(2);  
   }  
     
   foo(1); // 1

La fonction flèche n'a pas son propre objet arguments, mais dans la plupart des cas, le paramètre rest peut donner une solution :

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

Utiliser les fonctions fléchées comme les méthodes

Comme mentionné ci-dessus, les expressions de fonctions fléchées sont les plus appropriées pour les fonctions sans noms de méthode. quand on essaie de les utiliser comme méthodes

1. 'use strict';  
   var obj = {  
     i: 10,  
     b: () => console.log(this.i, this),  
     c: function() {  
       console.log( this.i, this)  
     }  
   }  
   obj.b(); // prints undefined, Window  
   obj.c(); // prints 10, Object {...}

箭头函数没有定义this绑定。

1. 'use strict';  
   var obj = {  
     a: 10  
   };  
     
   Object.defineProperty(obj, "b", {  
     get: () => {  
       console.log(this.a, typeof this.a, this);  
       return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined'  
     }  
   });

使用new操作符

箭头函数不能用作构造器，和 new 一起用就会抛出错误。

使用yield关键字

yield关键字通常不能在箭头函数中使用（except when permitted within functions further nested within it）。因此，箭头函数不能用作Generator函数。

返回对象字面量

请牢记，用 params => {object:literal} 这种简单的语法返回一个对象字面量是行不通的：

1. var func = () => {  foo: 1  };  
   // Calling func() returns undefined!  
     
   var func = () => {  foo: function() {}  };  
   // SyntaxError: function statement requires a name

这是因为花括号（即 {} ）里面的代码被解析为声明序列了（例如， foo 被认为是一个 label, 而非对象字面量里的键）。

所以，记得用圆括号把对象字面量包起来：

1. var func = () => ({ foo: 1 });

换行

箭头函数在参数和箭头之间不能换行哦

1. var func = ()  
              => 1; // SyntaxError: expected expression, got '=>'

解析顺序

在箭头函数中的箭头不是操作符(或者运算符,就像'+ -'那些), 但是 箭头函数有特殊的解析规则就是:相比普通的函数, 随着操作符优先级不同交互也不同(建议看英文版)。

let callback;  
  
callback = callback || function() {}; // ok  
callback = callback || () => {};      // SyntaxError: invalid arrow-function arguments  
callback = callback || (() => {});    // ok

1. 示例

2. // 一个空箭头函数,返回 undefined  
   let empty = () => {};  
     
   (() => "foobar")() // 返回 "foobar"   
     
   var simple = a => a > 15 ? 15 : a;   
   simple(16); // 15  
   simple(10); // 10  
     
   let max = (a, b) => a > b ? a : b;  
     
   // Easy array filtering, mapping, ...  
     
   var arr = [5, 6, 13, 0, 1, 18, 23];  
   var sum = arr.reduce((a, b) => a + b);  // 66  
   var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]  
   var double = arr.map(v => v * 2);       // [10, 12, 26, 0, 2, 36, 46]  
     
   // 更多简明的promise链  
   promise.then(a => {  
     // ...  
   }).then(b => {  
      // ...  
   });

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!