Was ist die Bedeutung von "=>" (ein Pfeil, gebildet aus Gleichheitszeichen & größer als) in JavaScript?

Question

Ich weiß, dass der >= Operator mehr als oder gleich bedeutet, aber ich habe => in einigen Quellcodes gesehen. Was bedeutet dieser Operator?

Hier ist der Code:

promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
    if (!aDialogAccepted)
        return;

    saveAsType = fpParams.saveAsType;
    file = fpParams.file;

    continueSave();
}).then(null, Components.utils.reportError);

Answer 1

Wie bereits alle anderen Antworten gesagt haben, ist es Teil der ES2015-Pfeilfunktionssyntax. Genauer gesagt ist es kein Operator, sondern ein Satzzeichen-Token, das die Parameter vom Körper trennt: ArrowFunction: ArrowParameters => ConciseBody. Z.B. (params) => { /* Körper */ }.

Answer 2

Wie bereits von anderen festgestellt wurde, verwenden normale (traditionelle) Funktionen this vom Objekt, das die Funktion aufgerufen hat, (z. B. ein angeklickter Button). Pfeilfunktionen verwenden stattdessen this vom Objekt, das die Funktion definiert.

Betrachten Sie zwei fast identische Funktionen:

regular = function() {
  ' Identischer Teil hier;
}

arrow = () => {
  ' Identischer Teil hier;
}

Das folgende Beispiel zeigt den grundlegenden Unterschied darin, was this für jede Funktion repräsentiert. Die normale Funktion gibt [object HTMLButtonElement] aus, während die Pfeilfunktion [object Window] ausgibt.

 Regular: `this` kommt von "diesem Button"

 Pfeil: `this` kommt vom Objekt, das die Funktion definiert

Answer 3

ES6 Pfeilfunktionen:

In javascript ist das => das Symbol eines Pfeilfunktionsausdrucks. Ein Pfeilfunktionsausdruck hat keine eigene this-Bindung und kann daher nicht als Konstruktorfunktion verwendet werden. zum Beispiel:

var words = 'hi von außerhalb des Objekts';

let obj = {
  words: 'hi von innerhalb des Objekts',
  talk1: () => {console.log(this.words)},
  talk2: function () {console.log(this.words)}
}

obj.talk1();  // hat keine eigene this-Bindung, this === window
obj.talk2();  // hat eine eigene this-Bindung, this ist obj

Regeln für die Verwendung von Pfeilfunktionen:

• Wenn es genau ein Argument gibt, können Sie die Klammern des Arguments weglassen.
• Wenn Sie einen Ausdruck zurückgeben und dies in derselben Zeile tun, können Sie die {} und die return-Anweisung weglassen.

Zum Beispiel:

let times2 = val => val * 2;  
// Es befindet sich in derselben Zeile und gibt einen Ausdruck zurück, daher werden die {} weggelassen und der Ausdruck implizit zurückgegeben
// es gibt auch nur ein Argument, daher werden die Klammern um das Argument weggelassen

console.log(times2(3));

Answer 4

JavaScript-Pfeilfunktionen sind ungefähr das Äquivalent von Lambda-Funktionen in Python oder Blöcken in Ruby. Dies sind anonyme Funktionen mit ihrer eigenen speziellen Syntax und funktionieren im Kontext ihres umgebenden Bereichs. Dies bedeutet, dass sie kein eigenes "this" haben, sondern stattdessen auf das des unmittelbar umgebenden Funktion zugreifen.

Aus dem ECMA-Standard:

Eine ArrowFunction definiert keine lokalen Bindungen für arguments, super, this oder new.target. Jeder Verweis auf arguments, super, this oder new.target innerhalb einer ArrowFunction muss sich auf eine Bindung in einer lexikalisch umgebenden Umgebung beziehen. Typischerweise ist dies die Funktionsumgebung einer unmittelbar umgebenden Funktion.

Oft hört man "ein Pfeilfunktionsausdruck ist eine kompakte Alternative zu einem traditionellen Funktionsausdruck", das ist nicht korrekt. Pfeilfunktionen sind KEIN Ersatz für traditionelle Funktionen, sie verhalten sich anders als traditionelle Funktionen.

Syntax

// Traditionelle Funktion
// Erstellen ihren eigenen Bereich innerhalb der Funktion
function (a){
  return a + 100;
}

// Pfeilfunktion 
// Erstellen KEINEN eigenen Bereich
// (Jeder Schritt entlang des Weges ist eine gültige "Pfeilfunktion")

// 1. Entfernen Sie das Wort "function" und platzieren Sie den Pfeil zwischen dem Argument und der öffnenden Body-Klammer
(a) => {
  return a + 100;
}

// 2. Entfernen Sie die Body-Klammern und das Wort "return" -- die Rückgabe ist impliziert.
(a) => a + 100;

// 3. Entfernen Sie die Argumentklammern (nur gültig bei genau einem Argument)
a => a + 100;