In welchen Szenarien in JavaScript können Pfeilfunktionen nicht verwendet werden?

1. Objektmethoden definieren

Um eine Objektmethode in JS zu definieren, definieren Sie eine Eigenschaft, die auf die Funktion des Objekts verweist. Wenn die Methode aufgerufen wird, verweist dies in der Methode auf das Objekt, zu dem die Methode gehört.

lass obj = {
    Array: [1, 2, 3],
    Summe: () => {
        console.log(dies === Fenster); // wahr
        returniere this.array.reduce((Ergebnis, Element) => Ergebnis + Element);
    }
};
console.log(dies === Fenster); //wahr
obj.sum(); //Fehler: Nicht abgefangener TypeError: Eigenschaft „reduce“ von undefined bei Object.sum kann nicht gelesen werden.

This.array ist zur Laufzeit nicht definiert. Wenn obj.sum aufgerufen wird, zeigt dies im Ausführungskontext immer noch auf window. Der Grund dafür ist, dass die Pfeilfunktion den Funktionskontext an window bindet. This.array ist äquivalent zu window.array, das offensichtlich nicht definiert ist.

Änderungsmethode: Verwenden Sie Funktionsausdrücke oder Methodenabkürzungen (bereits in ES6 unterstützt), um Methoden zu definieren. Dadurch wird sichergestellt, dass diese zur Laufzeit durch den Kontext bestimmt werden, der sie enthält. Der Code lautet wie folgt:

lass obj = {
    Array: [1, 2, 3],
    Summe() {
        console.log(dies === Fenster); // falsch
        returniere this.array.reduce((Ergebnis, Element) => Ergebnis + Element);
    }
};
console.log(dies === Fenster); //wahr
konsole.log(obj.sum()); //6

2. Definieren Sie Prototypmethoden

Dieselbe Regel gilt für Prototyp-Methodendefinitionen. Die Verwendung von Pfeilfunktionen führt zur Laufzeit zu einem Ausführungskontextfehler. Beispielsweise der folgende Code:

Funktion Katze(Name) {
    dieser.name = Name;
}

Cat.prototype.sayCatName = () => {
    console.log(dies === Fenster); // => wahr
    gib diesen Namen zurück;
};

const cat = neue Katze('Tom');
console.log(cat.sayCatName()); // undefiniert

Das Problem kann mit herkömmlichen Funktionsausdrücken gelöst werden. Der Code lautet wie folgt:

Funktion Katze(Name) {
    dieser.name = Name;
}

Cat.prototype.sayCatName = Funktion () {
    console.log(dies === Fenster); // => false
    gib diesen Namen zurück;
}

const cat = neue Katze('Tom');
console.log(Katze.sayCatName()); // Tom

Nachdem sayCatName zu einer normalen Funktion geworden ist, zeigt der Ausführungskontext beim Aufruf auf die neu erstellte Cat-Instanz.

3. Definieren Sie die Ereignisrückruffunktion

Pfeilfunktionen werden bei ihrer Deklaration an den Ausführungskontext gebunden. Eine dynamische Änderung des Kontexts ist nicht möglich. Dies ist ein Nachteil, wenn ein dynamischer Kontext benötigt wird.

Beispielsweise zeigt die allgemeine Bindung der DOM-Ereignisrückruffunktion (Ereignislistener) in der clientseitigen Programmierung beim Auslösen der Rückruffunktion auf den DOM-Knoten, an dem das Ereignis gerade auftritt, und der dynamische Kontext ist zu diesem Zeitpunkt sehr nützlich. Der folgende Code versucht beispielsweise, eine Pfeilfunktion als Ereignisrückruffunktion zu verwenden.

const button = document.getElementById('meinButton');
button.addEventListener('klicken', () => {
    console.log(dies === Fenster); // wahr
    this.innerHTML = 'Schaltfläche angeklickt';
});

Wenn die im globalen Kontext definierte Pfeilfunktion ausgeführt wird, zeigt dies auf das Fenster. Wenn ein Klickereignis auftritt, ist this.innerHTML gleichbedeutend mit window.innerHTML, was bedeutungslos ist.

Mithilfe von Funktionsausdrücken können Sie dies zur Laufzeit dynamisch ändern. Der korrigierte Code lautet:

const button = document.getElementById('meinButton');
button.addEventListener('klicken', Funktion () {
    console.log(diese === Schaltfläche); // wahr
    this.innerHTML = 'Schaltfläche angeklickt';
});

4. Definieren Sie den Konstruktor

Dies im Konstruktor zeigt auf das neu erstellte Objekt. Wenn new Car() ausgeführt wird, ist der Kontext des Konstruktors Car das neu erstellte Objekt, d. h. diese Instanz von Car === true. Offensichtlich können Pfeilfunktionen nicht als Konstruktoren verwendet werden. Tatsächlich verbietet Ihnen JS dies und löst in diesem Fall eine Ausnahme aus.

Beispielsweise meldet der folgende Code einen Fehler:

const Message = (Text) => {
    dieser.text = Text;
};
const helloMessage = neue Nachricht('Hallo Welt!'); //Fehler: Wirft „TypeError: Nachricht ist kein Konstruktor“

Beim Erstellen einer neuen Message-Instanz gibt die JS-Engine einen Fehler aus, da Message kein Konstruktor ist. Das obige Beispiel kann behoben werden, indem der Konstruktor entweder mit einem Funktionsausdruck oder einer Funktionsdeklaration deklariert wird.

const Nachricht = Funktion(Text) {
    dieser.text = Text;
};
const helloMessage = neue Nachricht('Hallo Welt!');
console.log(helloMessage.text); // 'Hallo Welt!'

Oben finden Sie Einzelheiten zu den Szenarien, in denen JavaScript keine Pfeilfunktionen verwenden kann. Weitere Informationen dazu, warum JavaScript keine Pfeilfunktionen verwenden kann, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!