Der Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen

Vorwort

---

Die Pfeilfunktion ist ein Hochfrequenztestpunkt im Front-End-Interview. Ich glaube, viele Leute wissen es es, weil seine Syntax besser ist als die gewöhnliche Funktion. Die Funktion ist prägnanter und wird daher von allen geliebt. Dies ist eine API, die wir in der täglichen Entwicklung verwendet haben, aber die meisten Schüler verstehen sie nicht gut genug. Erfahren Sie mehr über die grundlegende Syntax von Pfeilfunktionen und den Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen.

1. Grundlegende Syntax

[1.1]Funktionen definieren

Pfeilfunktionen in mathematischer Syntax definieren als gewöhnliche Funktionen Viel einfacher , ES6 ermöglicht die Verwendung von Pfeilen

=>

zum Definieren von Pfeilfunktionen. Die Pfeilfunktion lässt das Funktionsschlüsselwort weg und die Parameter der Funktion werden in die Klammern vor = gesetzt > folgt der Funktionskörper => in geschweiften Klammern.

// 箭头函数
let fun = (name) => {
    return `Hello ${name} !`;
};

// 普通函数
let fun = function (name) {
    return `Hello ${name} !`;
};

【1.2】Pfeilfunktionsparameter

① Wenn die Pfeilfunktion keine Parameter hat, schreiben Sie einfach eine leere Klammer.

② Wenn die Pfeilfunktion nur einen Parameter hat, können Sie auch die Klammern rund um den Parameter weglassen.

③ Wenn die Pfeilfunktion mehrere Parameter hat, trennen Sie die Parameter durch Kommas (,) und schließen Sie sie in Klammern ein.

// 没有参数
let fun1 = () => {
    console.log('dingFY');
};

// 只有一个参数，可以省去参数括号
let fun2 = name => {
    console.log(`Hello ${name} !`)
};

// 有多个参数，逗号分隔
let fun3 = (val1, val2, val3) => {
    return [val1, val2, val3];
};

【1.3】Der Funktionskörper der Pfeilfunktion

① Wenn der Funktionskörper der Pfeilfunktion nur eine Codezeile enthält, die einfach eine Variable oder einen einfachen JS-Ausdruck zurückgibt, Die geschweiften Klammern {} können für den Funktionskörper weggelassen werden.

let fun = val => val;
// 等同于
let fun = function (val) { return val };

let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

② Wenn der Funktionskörper der Pfeilfunktion nur eine Anweisung hat, gibt sie ein Objekt zurück. Sie können es so schreiben:

// 用小括号包裹要返回的对象，不报错
let getTempItem = id => ({ id: id, name: "Temp" });

// 但绝不能这样写，会报错，因为对象的大括号会被解释为函数体的大括号
let getTempItem = id => { id: id, name: "Temp" };

③ Wenn der Funktionskörper der Pfeilfunktion hat Nur eine Anweisung und muss keinen Wert zurückgeben (am häufigsten wird eine Funktion aufgerufen). Sie können vor dieser Anweisung ein void-Schlüsselwort hinzufügen

let fun = () => void doesNotReturn();

2. Der Unterschied zwischen Pfeilfunktionen und gewöhnliche Funktionen

---

【2.1】Die Syntax ist prägnanter und klarer

Wie aus dem grundlegenden Syntaxbeispiel des Pfeils ersichtlich ist Funktion oben, die Definition der Pfeilfunktion ist prägnanter und klarer als die Definition der gewöhnlichen Funktion. Viel schneller und sehr schnell.

【2.2】Die Pfeilfunktion hat keinen Prototyp (Prototyp), also hat die Pfeilfunktion selbst diesen nicht

// 箭头函数
let a = () => {};
console.log(a.prototype); // undefined

// 普通函数
function a() {};
console.log(a.prototype); // {constructor:f}

【2.3】Pfeilfunktion Es wird kein eigenes This erstellt.

Die Pfeilfunktion hat kein eigenes This. Der This-Punkt der Pfeilfunktion wird vom ersten gewöhnlichen Objekt im Äußeren geerbt Ebene, wenn sie definiert ist (Hinweis: wenn sie definiert ist, nicht wenn sie aufgerufen wird). Daher wird die Ausrichtung dieser Funktion in der Pfeilfunktion bei der Definition festgelegt und wird sich später nie ändern.

let obj = {
  a: 10,
  b: () => {
    console.log(this.a); // undefined
    console.log(this); // Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
  },
  c: function() {
    console.log(this.a); // 10
    console.log(this); // {a: 10, b: ƒ, c: ƒ}
  }
}
obj.b(); 
obj.c();

【2.4】call apply |. Die Ausrichtung dieser Funktion kann nicht geändert werden.

call apply | Wenn die Funktion ausgeführt wird, wird darauf hingewiesen, dass dies jedoch der Fall ist, da dies bei der Definition der Pfeilfunktion festgelegt ist und sich nie ändern wird. Die Verwendung dieser Methoden kann also niemals die Ausrichtung der Pfeilfunktion ändern.

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

【2.4】call apply |. Die Ausrichtung dieser Funktion kann nicht geändert werden.

call apply | Wenn die Funktion ausgeführt wird, wird darauf hingewiesen, dass dies jedoch der Fall ist, da dies bei der Definition der Pfeilfunktion festgelegt ist und sich nie ändern wird. Die Verwendung dieser Methoden kann also niemals die Ausrichtung der Pfeilfunktion ändern.

var id = 10;
let fun = () => {
    console.log(this.id)
};
fun();     // 10
fun.call({ id: 20 });     // 10
fun.apply({ id: 20 });    // 10
fun.bind({ id: 20 })();   // 10

[2.5] Pfeilfunktionen können nicht als Konstruktoren verwendet werden

Lassen Sie uns zunächst verstehen, was new im Konstruktor bewirkt? Vereinfacht ausgedrückt ist es in vier Schritte unterteilt: ① JS generiert zuerst intern ein Objekt. ② Dann wird dies in der Funktion auf das Objekt verwiesen.

Aber! ! Da die Pfeilfunktion kein eigenes „this“ hat, erbt „this“ tatsächlich „this“ in der äußeren Ausführungsumgebung, und der Sinn von „this“ ändert sich nie, je nachdem, wo oder von wem es aufgerufen wird, sodass die Pfeilfunktion nicht als verwendet werden kann Konstruktor, oder Es heißt, dass der Konstruktor nicht als Pfeilfunktion definiert werden kann, sonst wird beim Aufruf mit new ein Fehler gemeldet!

let Fun = (name, age) => {
    this.name = name;
    this.age = age;
};

// 报错
let p = new Fun('dingFY', 24);

[2.6] Pfeilfunktionen binden keine Argumente, sondern verwenden stattdessen Restparameter ... anstelle von Argumentobjekten, um auf die Parameterliste der Pfeilfunktionen zuzugreifen

Pfeilfunktionen nicht seine eigenen Argumente widersprechen. Durch den Zugriff auf Argumente in einer Pfeilfunktion wird der Wert tatsächlich in der äußeren lokalen (Funktions-)Ausführungsumgebung abgerufen.

// 普通函数
function A(a){
  console.log(arguments);
}
A(1,2,3,4,5,8);  //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ]

// 箭头函数
let B = (b)=>{
  console.log(arguments);
}
B(2,92,32,32);   // Uncaught ReferenceError: arguments is not defined

// rest参数...
let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

[2.7] Pfeilfunktionen können nicht als Generatorfunktionen verwendet werden und das Schlüsselwort yield kann nicht verwendet werden

Empfohlenes Tutorial: „JS-Tutorial „

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen Pfeilfunktionen und gewöhnlichen Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!