Einführung in Pfeilfunktionen in js

Die Pfeilfunktion ist ein Kurzfunktionsausdruck und hat den Wert this des lexikalischen Gültigkeitsbereichs (d. h. sie erstellt keine neuen Objekte wie this, arguments, super und new.target in ihrem eigenen Gültigkeitsbereich). Darüber hinaus sind Pfeilfunktionen immer anonym.

Grundlegende Grammatik

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

Erweiterte Grammatik

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

Beschreibung

Die Einführung von Pfeilfunktionen hat zwei Auswirkungen: Zum einen ist das Schreiben von Funktionen kürzer, zum anderen ist es eine lexikalische Analyse davon.

Kürzere Funktionen

In einigen funktionalen Programmiermustern sind kürzere Funktionen beliebt. Versuchen Sie zu vergleichen:

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

bindet dies nicht

Vor Pfeilfunktionen hatte jede neu definierte Funktion ihren eigenen Wert von der Konstruktor (zum Beispiel zeigt das This des Konstruktors auf ein neues Objekt; der This-Wert der Funktion im strikten Modus ist undefiniert; wenn die Funktion als Methode des Objekts aufgerufen wird, zeigt sein This auf das Objekt, das ihn aufgerufen hat ). Bei der objektorientierten Programmierung kann sich dies als sehr ärgerlich erweisen.

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

1. In ECMAScript 3/5 kann dieses Problem gelöst werden, indem eine Variable hinzugefügt wird, die auf das gewünschte Objekt zeigt, und die Variable dann in den Abschluss eingefügt wird.

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

Darüber hinaus können Sie auch die Bind-Funktion verwenden, um den gewünschten this-Wert an die Funktion growUp() zu übergeben.

Die Pfeilfunktion erfasst den this-Wert ihres Kontexts als ihren eigenen this-Wert, sodass der folgende Code wie erwartet ausgeführt wird.

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

Beziehung zum strikten Modus

Angesichts der Tatsache, dass dies auf der lexikalischen Ebene geschieht, sind die damit verbundenen Regeln im strikten Modus willens ignoriert werden.

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

Andere Regeln des strengen Modus bleiben unverändert

Anruf verwenden oder anwenden

Da dies der Fall ist been Die Bindung wird auf lexikalischer Ebene abgeschlossen. Beim Aufruf einer Funktion über die Methode call() oder apply() werden nur die Parameter übergeben, was keine Auswirkung darauf hat:

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>

Ungebundene Argumente

Die Pfeilfunktion macht das darin enthaltene Argumentobjekt nicht sichtbar: arguments.length, arguments[0], arguments[1] usw. zeigen nicht auf Pfeile Die Argumente der Funktion verweisen auf einen Wert mit dem Namen „Argumente“ im Gültigkeitsbereich der Pfeilfunktion (falls vorhanden, andernfalls ist er undefiniert).

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

Die Pfeilfunktion hat kein eigenes Argumentobjekt, aber in den meisten Fällen kann der Parameter rest eine Lösung liefern:

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

Verwenden Sie Pfeilfunktionen wie Methoden

Wie oben erwähnt, eignen sich Pfeilfunktionsausdrücke am besten für Funktionen ohne Methodennamen. Mal sehen, was passiert wenn wir versuchen, sie als Methoden zu nutzen.

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 => {  
      // ...  
   });

Das obige ist der detaillierte Inhalt vonEinführung in Pfeilfunktionen in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!