Pfeilfunktion vs. reguläre Funktion in JavaScript. Welches soll ich verwenden?

JavaScript bietet uns hauptsächlich zwei Möglichkeiten, Funktionen zu definieren: Pfeilfunktionen und reguläre Funktionen. Obwohl sie auf den ersten Blick ähnlich aussehen mögen, gibt es einige wesentliche Unterschiede, die sich darauf auswirken können, wie Ihr Code ausgeführt wird und wie Sie ihn strukturieren. Lassen Sie uns diese Unterschiede aufschlüsseln, damit Sie besser verstehen, wann Sie die einzelnen Typen verwenden sollten.

Syntaxunterschiede

Pfeilfunktionen sind kürzer und verwenden ein => Symbol. So sehen sie im Vergleich zu regulären Funktionen aus:

// Regular function
function add(a, b) {
  return a + b;
}

// Arrow function
const add = (a, b) => a + b;

Mit einer Pfeilfunktion können Sie das Schlüsselwort „return“ überspringen, wenn Sie einen einzelnen Ausdruck zurückgeben. Dies macht Pfeilfunktionen für kürzere, einfachere Funktionen beliebt.

diese Bindung

In regulären Funktionen bezieht sich dies auf das Objekt, das die Funktion aufruft. Pfeilfunktionen verfügen jedoch nicht über einen eigenen Kontext. Stattdessen erben sie dies vom umgebenden Code, in dem sie definiert sind.

Hier ist ein Beispiel, das zeigt, wie sich dieser Unterschied auf das Verhalten auswirkt:

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

Dies kann nützlich sein, wenn Sie Funktionen an Ereignis-Listener übergeben. Sehen Sie sich Folgendes an:

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // refers to the button element!
});

Argumente Objekt

Reguläre Funktionen haben Zugriff auf das Argumentobjekt, das alle an die Funktion übergebenen Argumente enthält. Pfeilfunktionen haben dies nicht; Sie verwenden stattdessen Restparameter ...args.

// regular function with arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// arrow function with rest parameters
const sum = (...args) => args.reduce((a, b) => a + b);

Verwendung in Rückrufen

Pfeilfunktionen können Ihren Code vereinfachen, insbesondere wenn es um Dinge geht, die Callbaks erfordern – zum Beispiel Versprechen oder Array-Methoden wie .map() und .filter().

// using arrow functions in array methods
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

Wann sollten Pfeilfunktionen im Vergleich zu regulären Funktionen verwendet werden?

Im Allgemeinen funktionieren Pfeilfunktionen gut für:

• Kurze, prägnante Funktionen wie in Array-Methoden oder Callbacks
• Situationen, in denen dies konsistent bleiben sollte, wie z. B. bei Unterrichtsmethoden oder -abschlüssen

Normale Funktionen sind nützlich, wenn:

• Sie benötigen eine bestimmte Bindung, z. B. in Objektmethoden oder Ereignis-Listenern
• Sie möchten das Argumentobjekt verwenden, ohne restliche Parameter zu definieren

Lassen Sie uns hier etwas Interessantes bemerken. Wie Sie sehen, sind die Unterschiede recht subtil. In den meisten Fällen spielt es keine Rolle, welches Sie wählen, es sei denn, Ihre Codebasis verwendet dies oder Argumente häufig (unwahrscheinlich).

Das Fazit lautet: Wählen Sie einfach aus, was Ihnen am besten gefällt, und seien Sie bei Ihrem gesamten Projekt konsistent.

Sind Sie mit diesem Ansatz einverstanden?

Das obige ist der detaillierte Inhalt vonPfeilfunktion vs. reguläre Funktion in JavaScript. Welches soll ich verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!