Das Schlüsselwort „this' in JavaScript: Ein Leitfaden für Anfänger

In diesem Blog befassen wir uns mit dem Schlüsselwort „this“ in JavaScript und untersuchen, wie es funktioniert, warum es sich in verschiedenen Kontexten unterschiedlich verhält und wie die Beherrschung Ihres Codes Ihren Code sauberer und effizienter machen kann. Am Ende werden Sie ein solides Verständnis dafür haben, wie Sie das Schlüsselwort „dieses“ in JavaScript effektiv für Ihre Projekte verwenden können.

Was ist also das Schlüsselwort „dieses“ in JavaScript?

Das Schlüsselwort „this“ in JavaScript ist wichtig, da es eine dynamische und kontextbasierte Interaktion innerhalb Ihres Codes ermöglicht. Hier sind einige Gründe, warum es so wertvoll ist:

• Direkt auf Objekteigenschaften zugreifen: „Dies“ ermöglicht Ihnen den Zugriff auf die Eigenschaften und Methoden eines Objekts innerhalb seiner Funktionen und deren Bearbeitung, wodurch es einfacher wird, direkt mit dem Objekt zu arbeiten.
• Ereignisbehandlung: In ereignisgesteuertem JavaScript bezieht sich „this“ häufig auf das HTML-Element, das das Ereignis ausgelöst hat. Dies erleichtert die Verwaltung von DOM-Interaktionen, ohne Elemente explizit an Funktionen zu übergeben.
• Dynamische Bindung: „this“ passt sich an, je nachdem, wie eine Funktion aufgerufen wird, nicht daran, wo sie definiert ist. Diese Flexibilität ermöglicht es „this“, je nach Kontext auf unterschiedliche Objekte zu verweisen – sei es eine globale Funktion, eine Methode innerhalb eines Objekts oder ein Rückruf in einem Ereignis-Listener.
• Vereinfacht objektorientierte Muster: Die Verwendung von „this“ ermöglicht einen stärker objektorientierten Ansatz, bei dem Eigenschaften und Methoden in Objekten gekapselt werden, wodurch Code organisiert und skalierbar wird.
• Kontextuelle Ausführung: „this“ ermöglicht die Ausführung von Funktionen im Kontext des Objekts, das sie aufruft. Das bedeutet, dass Sie das Objekt nicht als Argument übergeben müssen; „this“ bezieht sich automatisch darauf.
• Hilfreich bei Konstruktoren und Klassen: In ES6-Klassen oder traditionellen Konstruktorfunktionen ist „dies“ unverzichtbar, um Eigenschaften und Methoden für die neu erstellte Instanz zu definieren und jeder Instanz ihre eigenen eindeutigen Daten zu geben.

Mit diesen Funktionen ist „dies“ nicht nur ein Schlüsselwort, sondern auch ein grundlegender Aspekt des JavaScript-Ansatzes für Funktionen, Objekte und kontextgesteuerte Codierung.

Das Schlüsselwort „this“ in JavaScript in verschiedenen Kontexten verstehen

In JavaScript ist der Wert des Schlüsselworts „this“ nicht festgelegt und kann je nach Kontext, in dem eine Funktion aufgerufen wird, variieren. Diese dynamische Natur von „this“ ist einer der einzigartigsten – und manchmal verwirrendsten – Aspekte von JavaScript. Im Großen und Ganzen gibt es mehrere Kontexte, die den Wert von „diesem“ bestimmen.

Lassen Sie uns jeden Kontext anhand von Beispielen aufschlüsseln, um zu sehen, wie sich „dies“ verhält:

1. Standard-/Globaler Kontext

Wenn „this“ im globalen Kontext oder innerhalb einer eigenständigen Funktion verwendet wird, bezieht es sich auf das globale Objekt, das im Browser ein Fenster und in Node.js global ist.

Beispiel:

function showGlobalContext() {
  console.log(this);
}

showGlobalContext();

Dieser Code gibt Window { ... } in einem Browser oder [globales Objekt] in Node.js aus. Da showGlobalContext im globalen Kontext aufgerufen wird, zeigt „this“ auf das globale Objekt (Fenster im Browser oder global in Node.js). Hier gibt es keine explizite oder implizite Bindung, daher ist „this“ standardmäßig auf den globalen Bereich eingestellt.

2. Implizite Bindung

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, bezieht sich „dies“ auf das Objekt, das die Methode aufgerufen hat. Dies wird als implizite Bindung bezeichnet.

Beispiel:

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

person.greet();

Dies gibt „Hallo, ich bin Alice“ aus, da „greet“ vom Personenobjekt aufgerufen wird. Aufgrund der impliziten Bindung bezieht sich „dieser“ innerer Gruß auf eine Person und ermöglicht den Zugriff auf deren Namenseigenschaft. Implizite Bindung erfolgt, wenn die Funktion mit einem vorhergehenden Objekt aufgerufen wird.

3. Explizite Bindung

JavaScript ermöglicht die explizite Bindung von „this“ mithilfe der Methoden call, apply und bind. Mit diesen Methoden können Sie „this“ direkt auf ein bestimmtes Objekt festlegen.

Beispiel:

function introduce() {
  console.log(`Hello, I am ${this.name}`);
}

const user = { name: "Bob" };

// Using call
introduce.call(user);

// Using apply
introduce.apply(user);

// Using bind
const boundIntroduce = introduce.bind(user);
boundIntroduce();

Bei jedem Methodenaufruf wird „Hallo, ich bin Bob“ ausgegeben. Mit „call“ und „apply“ rufen wir sofort „introducing“ auf und setzen „this“ explizit auf „user“, der die Namenseigenschaft „Bob“ hat. Die Bindungsmethode gibt jedoch eine neue Funktion zurück, bei der „this“ dauerhaft an den Benutzer gebunden ist, sodass „boundIntroduce“ später aufgerufen werden kann, während „this“ immer noch auf den Benutzer festgelegt ist.

4. Pfeilfunktionen

Pfeilfunktionen in JavaScript haben keine eigene „this“-Bindung. Stattdessen erben sie „dies“ von ihrem lexikalischen Geltungsbereich oder dem Kontext, in dem sie definiert wurden. Dieses Verhalten ist hilfreich für Rückrufe und verschachtelte Funktionen.

Beispiel:

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  introduceTeam() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.introduceTeam();

Dies gibt Folgendes aus:

Alice is part of Development Team
Bob is part of Development Team
Charlie is part of Development Team

Hier erstellt die Pfeilfunktion in forEach kein eigenes „this“; Stattdessen erbt es „this“ von „introducingTeam“, das von „team“ aufgerufen wird. Folglich bezieht sich „this“ in der Pfeilfunktion auf team und ermöglicht den Zugriff auf die Namenseigenschaft. Wenn in forEach eine reguläre Funktion verwendet würde, wäre „this“ entweder undefiniert (im strikten Modus) oder würde auf das globale Objekt verweisen, was zu unerwarteten Ergebnissen führen würde.

5. Neue Bindung (Konstruktorfunktionen)

Wenn eine Funktion als Konstruktor verwendet wird (aufgerufen mit dem Schlüsselwort new), bezieht sich „this“ in dieser Funktion auf die neu erstellte Instanz. Dies ist nützlich, um mehrere Instanzen eines Objekts mit eigenen Eigenschaften und Methoden zu erstellen.

Beispiel:

function showGlobalContext() {
  console.log(this);
}

showGlobalContext();

In diesem Beispiel wird durch den Aufruf von new Person(„Alice“) ein neues Objekt erstellt, wobei sich „this“ auf dieses neue Objekt bezieht, nicht auf den globalen oder einen anderen Kontext. Das Ergebnis ist eine neue Instanz (person1) mit einer Namenseigenschaft, die auf „Alice“ festgelegt ist.

6. Klassenkontext

In der ES6-Syntax verwenden JavaScript-Klassen auch das Schlüsselwort „this“, um in Methoden auf die Instanz der Klasse zu verweisen. Das Verhalten ähnelt einer neuen Bindung, da jede Instanz der Klasse ihren eigenen „diesen“ Kontext hat.

Beispiel:

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

person.greet();

Hier bezieht sich „this“ innerhalb von showModel auf die spezifische Instanz myCar und gewährt Zugriff auf deren Modelleigenschaft. Jede mit dem neuen Auto erstellte Instanz verfügt über ein eigenes „dies“, das sich auf diese Instanz bezieht.

7. DOM-Ereignis-Listener

In Ereignis-Listenern bezieht sich „dies“ auf das HTML-Element, das das Ereignis ausgelöst hat. Dies erleichtert den Zugriff auf die Eigenschaften oder Methoden dieses Elements, ohne es explizit als Argument übergeben zu müssen.

Beispiel:

function introduce() {
  console.log(`Hello, I am ${this.name}`);
}

const user = { name: "Bob" };

// Using call
introduce.call(user);

// Using apply
introduce.apply(user);

// Using bind
const boundIntroduce = introduce.bind(user);
boundIntroduce();

In diesem Fall bezieht sich „this“ im Ereignis-Listener auf das Schaltflächenelement, auf das geklickt wurde, und ermöglicht den Zugriff auf seine Eigenschaften und Methoden. Wenn Sie jedoch eine Pfeilfunktion als Ereignishandler verwenden, würde sich „dies“ auf den lexikalischen Bereich beziehen, was wahrscheinlich zu unerwartetem Verhalten führen würde.

Häufige Fallstricke mit dem Schlüsselwort „this“ in JavaScript

Missverständnisse rund um „dies“ können zu unerwarteten Ergebnissen in JavaScript führen. Hier sind einige häufige Fallstricke, auf die Sie achten sollten:

1. „this“ in Callback-Funktionen verlieren

Bei der Übergabe einer Methode als Callback kann „this“ seine ursprüngliche Referenz verlieren. Dies geschieht, weil, wenn eine Funktion als eigenständige Funktion aufgerufen wird (ohne dass ein Objekt sie aufruft), „this“ standardmäßig das globale Objekt verwendet oder im strikten Modus undefiniert wird.

Beispiel:

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  introduceTeam() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.introduceTeam();

In diesem Beispiel wird dies innerhalb von „greet“ undefiniert, da setTimeout „greet“ als eigenständige Funktion und nicht als Methode des Benutzers aufruft.

2. Unerwartetes „dies“ in Pfeilfunktionen

Pfeilfunktionen haben keinen eigenen „dies“-Kontext; Stattdessen erben sie „this“ vom umgebenden lexikalischen Bereich. Dies kann zu Problemen führen, wenn Pfeilfunktionen in Situationen verwendet werden, in denen „this“ auf das aufrufende Objekt verweisen soll, z. B. in Methoden oder Ereignis-Listenern. Dieses Verhalten kann zu unerwarteten Werten für „dies“ in Szenarien führen, in denen Entwickler möglicherweise einen neuen „dies“-Kontext erwarten.

Beispiel:

Alice is part of Development Team
Bob is part of Development Team
Charlie is part of Development Team

Hier bezieht sich „dies“ auf das globale Objekt und nicht auf die Schaltfläche, da Pfeilfunktionen „dies“ von ihrem definierenden Bereich und nicht vom Ereigniskontext erben.

3. „dies“ in verschachtelten Funktionen

Bei der Verwendung regulärer Funktionen, die in Methoden verschachtelt sind, kann „this“ unerwartet auf das globale Objekt verweisen und nicht auf die äußere Funktion oder das äußere Objekt. Dies liegt daran, dass jeder Funktionsaufruf seinen eigenen „diesen“ Kontext hat. Wenn „this“ in einer verschachtelten Funktion nicht explizit gebunden ist, wird standardmäßig auf den globalen Kontext zurückgegriffen, was zu unerwartetem Verhalten führen kann, wenn versucht wird, auf Eigenschaften des äußeren Objekts zuzugreifen.

Beispiel:

function showGlobalContext() {
  console.log(this);
}

showGlobalContext();

In diesem Beispiel bezieht sich „this“ in showName standardmäßig auf den globalen Bereich und nicht auf eine Person, was zu einer unerwarteten Ausgabe führt.

Best Practices für die Verwendung des Schlüsselworts „this“ in JavaScript

Die Beherrschung des Schlüsselworts „this“ in JavaScript kann die Lesbarkeit und Wartbarkeit des Codes erheblich verbessern. Hier sind einige Best Practices, um sicherzustellen, dass sich „dies“ in verschiedenen Kontexten wie erwartet verhält:

1. Verwenden Sie Pfeilfunktionen für die lexikalische Bereichsbestimmung

Für Funktionen, die „dies“ vom umgebenden Bereich fernhalten müssen, verwenden Sie Pfeilfunktionen. Pfeilfunktionen haben kein eigenes „dies“, daher erben sie es von dort, wo sie definiert wurden. Dies ist hilfreich bei Rückrufen oder verschachtelten Funktionen.

Beispiel:

const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
};

person.greet();

2. Verwenden Sie Bind, Call oder Apply für explizite Bindung

Wenn Sie „this“ auf ein bestimmtes Objekt festlegen müssen, verwenden Sie bind, call oder apply. Dies ist nützlich für Rückrufe oder eigenständige Funktionsaufrufe, bei denen „this“ auf ein bestimmtes Objekt verweisen soll.

Beispiel:

function introduce() {
  console.log(`Hello, I am ${this.name}`);
}

const user = { name: "Bob" };

// Using call
introduce.call(user);

// Using apply
introduce.apply(user);

// Using bind
const boundIntroduce = introduce.bind(user);
boundIntroduce();

3. Vermeiden Sie „dies“ im globalen Geltungsbereich

Im globalen Bereich bezieht sich „this“ auf das Fensterobjekt (in Browsern) oder das globale Objekt (in Node.js), was zu unerwarteten Ergebnissen führen kann. Behalten Sie „dies“-abhängige Funktionen innerhalb von Objekten oder Klassen bei.

Beispiel:

const team = {
  name: "Development Team",
  members: ["Alice", "Bob", "Charlie"],
  introduceTeam() {
    this.members.forEach(member => {
      console.log(`${member} is part of ${this.name}`);
    });
  }
};

team.introduceTeam();

4. Verwenden Sie „this“ in Klassen und Konstruktoren

Verwenden Sie in ES6-Klassen oder Konstruktorfunktionen „this“ als Instanzeigenschaften. Dadurch bleiben die Daten jeder Instanz getrennt und folgen dem objektorientierten Design.

Beispiel:

Alice is part of Development Team
Bob is part of Development Team
Charlie is part of Development Team

5. Testen Sie „dies“ in verschiedenen Kontexten

Testen Sie, wie sich „this“ verhält, wenn Ihre Funktion in verschiedenen Kontexten verwendet wird – etwa Methoden, Rückrufen und Ereignis-Listenern. Dies hilft, unerwartete Ergebnisse frühzeitig in der Entwicklung zu erkennen.

Abschluss

In diesem Blog haben wir das Schlüsselwort „this“ in JavaScript untersucht und sein Verhalten in verschiedenen Kontexten wie globalen, impliziten, expliziten, neuen Bindungen und Pfeilfunktionen behandelt. Wir haben auch häufige Fallstricke besprochen, die es zu vermeiden gilt, und bewährte Vorgehensweisen, um sicherzustellen, dass „dies“ in Ihrem Code wie erwartet funktioniert. Wenn Sie „dies“ beherrschen, können Sie die Klarheit und Flexibilität des Codes erheblich verbessern und es Ihnen ermöglichen, effizienteres und wartbareres JavaScript zu schreiben.

Weitere Informationen finden Sie in der MDN-Dokumentation zum Schlüsselwort „dieses“ in JavaScript.

Das obige ist der detaillierte Inhalt vonDas Schlüsselwort „this' in JavaScript: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!