Grundlegende Zusammenfassung der Pfeilfunktionen in JavaScript

---

Vorwort

Eine kleine Zusammenfassung der Pfeilfunktionen

---

1. Pfeilfunktionsmerkmale

Pfeilfunktion (Die Pfeilfunktion ist eine neue Funktion im ES6-Standard

/**
 * ES6箭头函数语法定义函数，
 * 将原函数的“function”关键字和函数名都删掉，
 * 并使用“=>”连接参数列表和函数体。
 *  注意点：{
 * 
 *  如果形参只有一个，则小括号可以省略；
    函数体如果只有一条语句，则花括号可以省略，并省略return，函数的返回值为该条语句的执行结果；
    箭头函数 this 指向声明时所在作用域下 this 的值；
    箭头函数不能作为构造函数实例化；
    不能使用 arguments
}
  如 let sum = (num1, num2) => num1 + num2; 
    // 等同于 let sum = function(num1, num2) { return num1 + num2; }; 
 */

2. Zu beachtende Punkte zu Pfeilfunktionen

Erstens weist dies auf das Problem hin

• Für die durch Funktion definierte Funktion ändert sich der Sinn dieser Änderung mit der Änderung der aufrufenden Umgebung.
• Dieser Punkt in der Pfeilfunktion ist fest und zeigt immer auf die Umgebung, in der die Funktion definiert ist.
  • In einer mit function definierten Funktion
  • Der This-Zeiger ändert sich, wenn sich die aufrufende Umgebung ändert:

 // 普通函数的this指向是随着调用环境的变化而变化的;
      function f1() {
    
    
        console.log("普通函数f1的this:" + this);
      }
      var obj = {
    
     A: f1 };
      f1(); //this指向Window
      obj.A(); //this指向的是 obj { A: foo }

 // 明显使用箭头函数的时候，this的指向是没有发生变化的（这里一直都是window）。
      var f2 = () => {
    
    
        console.log("箭头函数f2的this:" + this);
      };
      var obj2 = {
    
     B: f2 };
      f2();//this指向Window
      obj2.B();//this指向Window

2. Konstruktor kann nicht ausgeführt werden

• Funktionen können Konstruktoren definieren, Pfeilfunktionen jedoch nicht.
• Fortsetzung des Beispiels aus dem vorherigen Abschnitt:

// 对普通函数构造函数
      var f11 = new f1();
      console.log("我是普通函数的构造函数:" + f11);
// 对箭头函数构造函数
      var f21 = new f2();
      console.log("我是箭头函数的构造函数:" + f21);

• Die Ergebnisanzeige:
  

3. Variable Förderung

• Aufgrund des Speichermechanismus von js hat die Funktion die höchste Ebene, und bei der Definition von Funktionen mit Pfeilfunktionen
  ist das Schlüsselwort var erforderlich (ganz zu schweigen von der Definition von let const).
• Die durch var definierte Variable kann nicht heraufgestuft werden, daher muss die Pfeilfunktion vor dem Aufruf definiert werden
• Daher sollte die Pfeilfunktion so weit wie möglich mit var definiert und vor dem Aufruf definiert werden

Drittens die Verwendung von Pfeilfunktionen

• Löschen Sie das Schlüsselwort „function“ und den Funktionsnamen der ursprünglichen Funktion und verbinden Sie die Parameterliste und den Funktionskörper mit „=>“.
• Unter der Voraussetzung mehrerer Parameter kann () nicht weggelassen werden
• Kann weggelassen werden, wenn es sich um einen einzelnen Parameter handelt
• Wenn keine Parameter vorhanden sind, verwenden Sie stattdessen leere Klammern ().

1. Pfeilfunktionen mit mehreren Parametern

//有多个参数的前提下，()不能省略 若没有参数使用空括号代替
var add = (a, b) => console.log(a + b);
add(1, 2);
//相当于
var function add(a, b) {
    
     console.log(a + b) }
add(1, 2);

2. Einzelner Parameter oder kein Parameter

//若为单个参数则可以省略，
// 当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。
var f1 = () =>
{
    
    
  console.log("无参数的时候不能省略括号");
};
f1();
// 单个参数
var f3 = (a) => console.log("单个参数可以省略括号");
f3();

3. Variable Parameter

// 可变参数
var f4 = (a, b, c, ...args) => console.log(...args);
f4(1, 2, 3, 4, 5, 6, 7); //console.log(...args)不打印前面的a,b,c

4. Der Fall der unterlassenen Rückgabe

• Pfeilfunktionen entsprechen anonymen Funktionen und vereinfachen Funktionsdefinitionen.
• Pfeilfunktionen haben zwei Formate: eines enthält nur einen Ausdruck, wobei { ... } und return weggelassen werden.
• Es gibt noch eine andere, die mehrere Anweisungen enthalten kann. Derzeit können {...} und return nicht weggelassen werden, unabhängig von der Anzahl der Parameter

//多条语句，不能省略{ }
var f5 = (a) =>
{
    
    
  a = a + 1;
  return a;
};
console.log(f5(1));

• Wenn ein Objekt zurückgegeben wird
• Besondere Aufmerksamkeit muss gewidmet werden, wenn es sich um einen einzelnen Ausdruck handelt, der ein benutzerdefiniertes Objekt zurückgibt.
• Wenn Sie keine Klammern schreiben, wird ein Fehler gemeldet, da im Funktionskörper ein Syntaxkonflikt mit { ... } vorliegt.
• Beachten Sie, dass in Klammern eingeschlossene geschweifte Klammern Objektdefinitionen und keine Funktionskörper sind

//如下所示
x => {
    
    key: x} // 报错
x => ({
    
    key: x}) // 正确

Zusätzliche Punkte:

补充点

• Die Pfeilfunktion legt die Ausrichtung hiervon vollständig fest, die immer auf den lexikalischen Bereich zeigt, bei dem es sich um die äußere aufrufende Person handelt
• Da dies entsprechend dem lexikalischen Bereich in der Pfeilfunktion gebunden wurde,
  kann dies beim Aufruf der Pfeilfunktion mit call() oder apply() nicht gebunden werden, d. h. der erste übergebene Parameter wird ignoriert

var person = {
    
    
 firstName: "zwt",
 lastName: "cherish",
 getFullName: function ()
 {
    
    
   console.log(this);
   var first = this.firstName;
   console.log(first);
   var fn = () =>
   {
    
    
     console.log(this);
     return this.firstName + this.lastName;
   };
   return fn();
 },
};
person.getFullName();

---

Zusammenfassen

Eine kleine Zusammenfassung über Pfeilfunktionen.