Eigenschaften von JavaScript-Pfeilfunktionen und Unterschiede zu normalen Funktionen

1. Verwendung von Pfeilfunktionen

ES6 fügt eine neue Methode zum Definieren von Funktionsausdrücken mithilfe von Pfeilen => hinzu. In vielen Fällen besteht kein Unterschied zwischen den von Pfeilfunktionen und Funktionsausdrücken erstellten Funktionen. Der einzige Unterschied besteht in der Art und Weise, wie sie geschrieben werden.

Der zweite Teil dieses Artikels stellt die funktionalen Unterschiede zwischen Pfeilfunktionen und normalen Funktionen vor.

1. Von der Normalfunktion zur Pfeilfunktion

Wie unten gezeigt, können Sie zum Definieren einer Funktion function verwenden. Die Funktion erhält zwei Parameter a und b und gibt die Summe von a und b zurück.

Funktion getSum(a, b) {
    gib a + b zurück;
}

Wenn Sie zum Definieren dieser Funktion eine Pfeilfunktion verwenden, können Sie sie wie folgt schreiben, wobei Sie das function weglassen und einen Pfeil => zum Definieren einer Funktion verwenden.

const getSum = (a, b) => {
    gib a + b zurück;
};

2. Geschweifte Klammern weglassen und zurückgeben

Wenn Sie eine Pfeilfunktion definieren und der Funktionskörper nur eine return -Anweisung enthält, können Sie die geschweiften Klammern {} und return weglassen.

Unten sehen Sie die vollständige Definition der Pfeilfunktion.

const getSum = (a, b) => {
    gib a + b zurück;
};

Diese Pfeilfunktion hat nur eine return -Anweisung in ihrem Rumpf. Die vereinfachte Notation nach dem Weglassen der geschweiften Klammern {} und return lautet wie folgt:

Konstanten getSumme = (a, b) => a + b;

3. Klammern weglassen

Wenn die definierte Pfeilfunktion nur einen Parameter hat, können die Klammern weggelassen werden.

Wie unten gezeigt, hat die definierte Pfeilfunktion nur einen Parameter und wird vollständig geschrieben.

const-Funktion = (a) => {
    gib a + 2 zurück;
};

Die Klammern um die Parameter werden weggelassen und der folgende Code entspricht dem obigen Code.

Konstante Funktion = a => a + 2;

Hinweis : Wenn die Funktion keine Parameter hat oder mehrere Parameter hat, müssen Klammern verwendet werden.

2. Der Unterschied zwischen Pfeilfunktionen und normalen Funktionen

In den meisten Fällen können Pfeilfunktionen überall dort verwendet werden, wo normale Funktionen verwendet werden können, da Pfeilfunktionen prägnanter sind.

In manchen Fällen unterscheiden sich Pfeilfunktionen jedoch stark von normalen Funktionen.

1. Das this der Pfeilfunktion ist das this des übergeordneten Bereichs

Der folgende Code definiert ein Objekt obj , das eine als normale Funktion definierte Methode getThis hat, die this hier ausgibt. Durch den Aufruf von obj.getThis() wird das obj -Objekt ausgedruckt. Dies bedeutet, dass this innerhalb der Methode auf das Objekt obj zeigt.

const obj = {
    Name: 'Jack',
    getThis() {
        konsole.log(dies);
    },
};
obj.getThis(); // {name: 'Jack', getThis: ƒ}

Ähnlich wird ein Objekt obj definiert, aber die darin enthaltene Methode wird mit einer Pfeilfunktion definiert. Wenn obj.getThis() im Browser aufgerufen wird, wird Window gedruckt. Dies zeigt, dass selbst wenn die Methode für das Objekt obj aufgerufen wird, this innerhalb der Methode nicht auf obj zeigt, sondern auf this des Kontexts, in dem obj definiert ist.

const obj = {
    Name: 'Jack',
    getThis: () => {
        konsole.log(dies);
    },
};
obj.getThis(); // Fenster

2. call, apply und bind können das this von Pfeilfunktionen nicht ändern

Im folgenden Code druckt die normale Funktion getName this.name , bindet this in der Funktion über call an obj und ruft getName auf, um den name auf obj auszugeben.

const obj = {
    Name: 'Jack',
};

Funktion getName() {
    konsole.log(dieser.name);
}
getName.call(obj); // Buchse

Wenn die Funktion in eine Pfeilfunktion geändert wird, funktioniert call nicht und this kann innerhalb der Funktion nicht an obj gebunden werden und es wird undefined ausgegeben.

const obj = {
    Name: 'Jack',
};

const getName = () => {
    konsole.log(dieser.name);
};
getName.call(obj); // undefiniert

3. Kann nicht als Konstruktor verwendet werden

Pfeilfunktionen können nicht als Konstruktoren verwendet werden. Wenn Sie eine Pfeilfunktion als Konstruktor verwenden, wird ein Fehler gemeldet, wie im folgenden Code gezeigt.

const Person = () => {
    dieser.name = "Jack";
};
const usr = new Person(); // Person ist kein Konstruktor

4. Keine Argumente

Innerhalb einer normalen Funktion können Sie arguments verwenden, um die übergebenen Parameter abzurufen, bei denen es sich um ein arrayähnliches Objekt handelt:

Funktion func() {
    konsole.log(Argumente);
}
func(1, 2, 3); // [Argumente] { '0': 1, '1': 2, '2': 3 }

Pfeilfunktionen können das arguments jedoch nicht verwenden und können keine Eingabeparameter abrufen.

Wenn Sie im Browser arguments Argumentobjekt in einer Pfeilfunktion verwenden, wird ein Fehler gemeldet.

const func = () => {
    // Browserumgebung console.log(Argumente); // Argumente sind nicht definiert
};
Funktion(1, 2, 3);

Die Pfeilfunktion kann die Eingabeparameter jedoch in der Form von ...args innerhalb der Parameter erhalten, und die erhaltenen args sind ein Array.

const func = (...args) => {
    konsole.log(args); // [ 1, 2, 3 ]
};
Funktion(1, 2, 3);

5. Pfeilfunktionen unterstützen new.target nicht

Innerhalb des Konstruktors einer normalen Funktionsdefinition wird new.target unterstützt, um den Konstruktor zurückzugeben, der die Instanz erstellt.

Funktion Person() {
    dieser.name = "Jack";
    konsole.log(neues.ziel);
}
// Zeigt auf den Konstruktor new Person(); // [Funktion: Person]

In Pfeilfunktionen wird new.target nicht unterstützt. In der Browserumgebung new.target expression is not allowed here Pfeilfunktionen, new.target verwenden, einen Fehler: Der Ausdruck „new.target“ ist hier nicht zulässig.

const Person = () => {
    dieser.name = "Jack";
    konsole.log(neues.ziel);
}
// Browserumgebung new Person(); // new.target-Ausdruck ist hier nicht zulässig

Quellenangaben zu diesem Artikel:

Fortgeschrittene JavaScript-Programmierung (4. Auflage)

Damit ist dieser Artikel über die Eigenschaften von JavaScript-Pfeilfunktionen und die Unterschiede zu normalen Funktionen abgeschlossen. Weitere Informationen zu JS-Pfeilfunktionen und normalen Funktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!