Dies verstehen, binden, aufrufen und in JavaScript anwenden

Dieser Artikel wurde ursprünglich für DigitalOcean geschrieben.

Das Schlüsselwort this ist ein sehr wichtiges Konzept in JavaScript und sowohl für neue Entwickler als auch für diejenigen, die Erfahrung in anderen Programmiersprachen haben, besonders verwirrend. In JavaScript ist this ein Verweis auf ein Objekt., Das Objekt, auf das sich this bezieht, kann implizit variieren, je nachdem, ob es global ist, auf einem Objekt oder in einem Konstruktor, und kann auch explizit variieren, basierend auf der Verwendung der Function Prototypmethoden , call und apply.

Obwohl this ein etwas komplexes Thema ist, wird es auch angezeigt, sobald Sie mit dem Schreiben Ihrer ersten JavaScript-Programme beginnen., Unabhängig davon, ob Sie versuchen, auf ein Element oder Ereignis im Document Object Model (DOM) zuzugreifen, Klassen zum Schreiben im objektorientierten Programmierstil zu erstellen oder die Eigenschaften und Methoden regulärer Objekte zu verwenden, wird this.

In diesem Artikel erfahren Sie, worauf sich this implizit basierend auf dem Kontext bezieht, und Sie erfahren, wie Sie die , call und apply Methoden verwenden, um den Wert von thisexplizit zu bestimmen.,

Impliziter Kontext

Es gibt vier Hauptkontexte, in denen der Wert von this implizit abgeleitet werden kann:

• der globale Kontext
• als Methode innerhalb eines Objekts
• als Konstruktor einer Funktion oder Klasse
• als DOM-Ereignishandler

Global

Im globalen Kontext kontext,this bezieht sich auf das globale Objekt. Wenn Sie in einem Browser arbeiten, lautet der globale Kontext window. Wenn Sie in Node arbeiten.js, der globale Kontext ist global.,

Hinweis: Wenn Sie mit dem Konzept des Gültigkeitsbereichs in JavaScript noch nicht vertraut sind, überprüfen Sie bitte die Variablen, den Gültigkeitsbereich und das Heben in JavaScript.

Für die Beispiele üben Sie den Code in der Developer Tools Console des Browsers. Lesen Sie, wie Sie die JavaScript-Entwicklerkonsole verwenden, wenn Sie mit der Ausführung von JavaScript-Code im Browser nicht vertraut sind.

Wenn Sie den Wert von this ohne anderen Code protokollieren, sehen Sie, auf welches Objekt sich this bezieht.,

console.log(this)

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Sie können sehen, dass this window ist, was das globale Objekt eines Browsers ist.

Beim Verständnis von Variablen, Umfang und Heben in JavaScript haben Sie gelernt, dass Funktionen einen eigenen Kontext für Variablen haben. Sie könnten versucht sein zu glauben, dass this innerhalb einer Funktion denselben Regeln folgen würde, dies jedoch nicht. Eine Funktion der obersten Ebene behält weiterhin die this Referenz des globalen Objekts bei.,

Sie schreiben eine Funktion der obersten Ebene oder eine Funktion, die keinem Objekt zugeordnet ist:

function printThis() { console.log(this)}printThis()

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Auch innerhalb einer Funktion bezieht sich this immer noch auf die window oder globales Objekt.

Bei Verwendung des strikten Modus lautet der Kontext von this innerhalb einer Funktion im globalen Kontext undefined.,

'use strict'function printThis() { console.log(this)}printThis()

undefined

Im Allgemeinen ist es sicherer, den strikten Modus zu verwenden, um die Wahrscheinlichkeit zu verringern, dass this einen unerwarteten Bereich hat. Selten möchte jemand mit window auf das Objekt thisverweisen.

Weitere Informationen zum Strict-Modus und zu den Änderungen in Bezug auf Fehler und Sicherheit finden Sie in der Dokumentation zum Strict-Modus auf MDN.,

Eine Objektmethode

Eine Methode ist eine Funktion für ein Objekt oder eine Aufgabe, die ein Objekt ausführen kann. Eine Methode verwendet this, um auf die Eigenschaften des Objekts zu verweisen.

"The United States of America was founded in 1776."

In diesem Beispiel ist this dasselbe wie america.

In einem verschachtelten Objekt bezieht sich this auf den aktuellen Objektbereich der Methode. Im folgenden Beispiel bezieht sich this.symbol innerhalb des details – Objekts auf details.symbol.,

"The symbol is the eagle and the currency is USD."

Eine andere Denkweise ist, dass this sich beim Aufrufen einer Methode auf das Objekt auf der linken Seite des Punkts bezieht.

Ein Funktionskonstruktor

Wenn Sie das Schlüsselwort new, wird eine Instanz einer Konstruktorfunktion oder-klasse erstellt. Funktionskonstruktoren waren die Standardmethode zum Initialisieren eines benutzerdefinierten Objekts, bevor die Syntax class in das ECMAScript 2015-Update für JavaScript eingeführt wurde., Wenn Sie Klassen in JavaScript verstehen, erfahren Sie, wie Sie einen Funktionskonstruktor und einen äquivalenten Klassenkonstruktor erstellen.

"The United States of America was founded in 1776."

In diesem Zusammenhang ist this nun an die Instanz von Country gebunden, die in der america Konstante enthalten ist.

Ein Klassenkonstruktor

Ein Konstruktor einer Klasse verhält sich wie ein Konstruktor einer Funktion. Lesen Sie mehr über die ähnlichkeiten und Unterschiede zwischen Funktion Konstruktoren und ES6-Klassen im Verständnis von Klassen in JavaScript.,

this in der describe Methode bezieht sich auf die Instanz von Country, die america.

"The United States of America was founded in 1776."

Ein DOM-Ereignishandler

Im Browser gibt es einen speziellen this Kontext für Ereignishandler. In einem Ereignishandler, der von addEventListener aufgerufen wird, bezieht sich this auf event.currentTarget., Meistens verwenden Entwickler einfach event.target oder event.currentTarget, um auf Elemente im DOM zuzugreifen, aber da sich die this – Referenz in diesem Zusammenhang ändert, ist es wichtig zu wissen.

Im folgenden Beispiel erstellen wir eine Schaltfläche, fügen Text hinzu und hängen ihn an das DOM an. Wenn wir den Wert von this im Ereignishandler protokollieren, wird das Ziel gedruckt.,

<button>Click me</button>

Sobald Sie dies in Ihren Browser einfügen, wird eine Schaltfläche an die Seite angehängt, auf der“Click me“ steht. Wenn Sie auf die Schaltfläche klicken, wird <button>Click me</button> in Ihrer Konsole angezeigt, da das Klicken auf die Schaltfläche das Element protokolliert, bei dem es sich um die Schaltfläche selbst handelt. Wie Sie sehen, bezieht sich this daher auf das Zielelement, dem wir einen Ereignis-Listener hinzugefügt haben.,

Expliziter Kontext

In allen vorherigen Beispielen wurde der Wert von this durch seinen Kontext bestimmt—sei es global, in einem Objekt, in einer konstruierten Funktion oder Klasse oder in einem DOM-Ereignishandler. Mit call, apply oder können Sie jedoch explizit bestimmen, worauf sich this beziehen soll.,

Es ist schwierig, genau zu definieren, wann call, apply oder verwendet werden soll, da dies vom Kontext Ihres Programms abhängt. kann besonders hilfreich sein, wenn Sie Ereignisse verwenden möchten, um auf Eigenschaften einer Klasse innerhalb einer anderen Klasse zuzugreifen. Wenn Sie beispielsweise ein einfaches Spiel schreiben, können Sie die Benutzeroberfläche und die E/A in eine Klasse und die Spiellogik und den Status in eine andere Klasse aufteilen., Da die Spiellogik auf Eingaben wie Tastendruck und Klicken zugreifen müsste, möchten Sie die Ereignisse, um auf den this – Wert der Spiellogikklasse zuzugreifen.

Der wichtige Teil ist zu wissen, wie man bestimmt, auf welches Objekt this sich bezieht, was Sie implizit mit dem tun können, was Sie in den vorherigen Abschnitten gelernt haben, oder explizit mit den drei Methoden, die Sie als nächstes lernen werden.,

Rufen Sie

call und apply sind sehr ähnlich—sie rufen eine Funktion mit einem angegebenen this Kontext und optionale Argumente. Der einzige Unterschied zwischen call und apply besteht darin, dass call die Argumente einzeln übergeben muss und apply die Argumente als Array verwendet.,

In diesem Beispiel erstellen wir ein Objekt und erstellen eine Funktion, die auf this verweist, aber keinen this Kontext hat.

"undefined was written by undefined"

Da summary und book keine Verbindung haben, wird der Aufruf von summary selbst nur undefined drucken, da nach diesen Eigenschaften für das globale Objekt gesucht wird.,

Hinweis: Wenn Sie dies im strikten Modus versuchen, führt dies zu Uncaught TypeError: Cannot read property 'title' of undefined, da this selbst undefined.

Sie können jedoch call und apply verwenden, um die this Kontext von book auf der Funktion aufzurufen.,

"Brave New World was written by Aldous Huxley."

Es besteht jetzt eine Verbindung zwischen book und summary, wenn diese Methoden angewendet werden. Lassen Sie uns genau bestätigen, was this ist.

function printThis() { console.log(this)}printThis.call(book)// or:whatIsThis.apply(book)

{title: "Brave New World", author: "Aldous Huxley"}

In diesem Fall wird this tatsächlich zum als Argument übergebenen Objekt.

So sind call und apply gleich, aber es gibt einen kleinen Unterschied., Sie können nicht nur den this – Kontext als erstes Argument übergeben, sondern auch zusätzliche Argumente übergeben.

function longerSummary(genre, year) { console.log( `${this.title} was written by ${this.author}. It is a ${genre} novel written in ${year}.`, )}

Mit call wird jeder zusätzliche Wert, den Sie übergeben möchten, als zusätzliches Argument gesendet.,

longerSummary.call(book, 'dystopian', 1932)

"Brave New World was written by Aldous Huxley. It is a dystopian novel written in 1932."

Wenn Sie versuchen, genau dieselben Argumente mit apply zu senden, passiert Folgendes:

longerSummary.apply(book, 'dystopian', 1932)

Uncaught TypeError: CreateListFromArrayLike called on non-object at <anonymous>:1:15

longerSummary.apply(book, )

"Brave New World was written by Aldous Huxley. It is a dystopian novel written in 1932."

const braveNewWorldSummary = summary.bind(book)braveNewWorldSummary()

"Brave New World was written by Aldous Huxley"