Verständnis von this, Bind, Call und Apply in JavaScript

Wie funktioniert "this" in JavaScript und wie kann es in verschiedenen Kontexten genutzt werden? Wir zeigen es Ihnen und erklären außerdem, wie Sie "bind", "call" und "apply" verwenden können, um die Kontrolle über "this" in Ihren JavaScript-Funktionen zu behalten.

Das this-Schlüsselwort

In JavaScript bezieht sich "this" auf ein Objekt, und je nachdem, wie und wo es aufgerufen wird, kann es auf unterschiedliche Objekte verweisen. Schauen wir uns verschiedene Kontexte an:

Globaler Kontext

Im globalen Kontext verweist "this" auf das globale Objekt, das in einem Browser "window" und in Node.js "global" ist.

Beispiel:

console.log(this);

Ausgabe (im Browser):

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

Methode in einem Objekt

Wenn eine Funktion eine Methode eines Objekts ist, verweist "this" auf dieses Objekt.

Beispiel:

    const auto = {
  marke: 'BMW',
  modell: 'X5',
  vorstellen: function() {
    console.log(`Ich fahre einen ${this.marke} ${this.modell}.`);
  }
}

auto.vorstellen();

Ausgabe:

Ich fahre einen BMW X5.

Konstruktorfunktion

Wenn Sie eine Funktion als Konstruktor verwenden, um Objekte zu erstellen, verweist "this" auf das neu erstellte Objekt.

Beispiel:

   function Person(name, alter) {
  this.name = name;
  this.alter = alter;
}

const alice = new Person('Alice', 30);

console.log(alice.name); // Ausgabe: Alice  

DOM-Ereignishandler

In einem DOM-Ereignishandler verweist "this" auf das Element, auf das der Ereignishandler angewendet wurde.

Beispiel:

 const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log(this.textContent);
});   

Wenn der Button geklickt wird, gibt der Ereignishandler den Text des Buttons aus.

Die Methoden "bind", "call" und "apply"

Die Methode "bind"

Die Methode "bind" ermöglicht es, eine Funktion an ein bestimmtes Objekt zu binden. Die ursprüngliche Funktion bleibt unverändert, aber bei Aufruf der gebundenen Funktion wird "this" auf das angegebene Objekt gesetzt.

Beispiel:

 const hund = {
  name: 'Rex',
  bellen: function() {
    console.log(`${this.name} bellt.`);
  }
}

const katze = {
  name: 'Whiskers'
}

const bellenDerKatze = hund.bellen.bind(katze);

bellenDerKatze(); // Ausgabe: Whiskers bellt.   

Die Methoden "call" und "apply"

Die Methoden "call" und "apply" ermöglichen es, eine Funktion aufzurufen und den Wert von "this" sowie Argumente explizit festzulegen. Der Unterschied zwischen den beiden Methoden besteht darin, wie Sie Argumente übergeben:

• "call" erwartet, dass die Argumente einzeln übergeben werden.
• "apply" erwartet, dass die Argumente in einem Array übergeben werden.

Beispiel mit "call":

function grüßen(geschlecht) {
  if (geschlecht === 'männlich') {
    console.log(`Hallo, Herr ${this.name}!`);
  } else if (geschlecht === 'weiblich') {
    console.log(`Hallo, Frau ${this.name}!`);
  } else {
    console.log(`Hallo, ${this.name}!`);
  }
}

const person = {
  name: 'Max'
}

grüßen.call(person, 'männlich'); // Ausgabe: Hallo, Herr Max!    

Beispiel mit "apply":

   const argumente = ['weiblich'];

grüßen.apply(person, argumente); // Ausgabe: Hallo, Frau Max! 

Fazit

In JavaScript ist das Verständnis von "this" und die Verwendung der Methoden "bind", "call" und "apply" entscheidend, um den Kontext und die Ausführung von Funktionen zu steuern. Mit diesem Wissen können Sie sicherstellen, dass Ihre Funktionen auf die richtigen Objekte zugreifen und korrekt ausgeführt werden.