JavaScript - das this-Keyword

Hallo da draußen, angehende JavaScript-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt des this-Keywords. Als dein freundlicher Nachbarschaftsinformatiklehrer bin ich hier, um dich durch dieses manchmal knifflige, aber immer faszinierende Konzept zu führen. Also hole dir dein liebstes Getränk, setze dich bequem hin, und tauchen wir ein!

Was ist das this-Keyword?

Stell dir vor, du bist auf einer Party, und jemand ruft "Hey, du!" Wer würde sich umdrehen? Jeder, oder? Aber wenn sie sagten "Hey, Sarah!" würde nur Sarah antworten. In JavaScript ist das this-Keyword so, als würde man "Hey, du!" zu einem Objekt sagen. Es ist eine Möglichkeit, auf das aktuelle Objekt im Kontext zu verweisen.

Das this-Keyword ist ein spezieller Bezeichner, der automatisch in dem Gültigkeitsbereich jeder Funktion definiert ist. Aber hier ist der Haken - sein Wert wird durch die Art und Weise bestimmt, wie eine Funktion aufgerufen wird. Diese dynamische Natur von this ist das, was es sowohl mächtig als auch manchmal verwirrend macht.

Auf welches Objekt bezieht sich this?

Jetzt wird es interessant. Das Objekt, auf das this verweist, kann je nach Verwendung und Ort variieren. Es ist wie ein Chamäleon, das seine Farben basierend auf seiner Umgebung ändert. Sehen wir uns einige Szenarien an:

Syntax

Bevor wir tiefer einsteigen, schauen wir uns schnell an, wie wir this verwenden:

console.log(this);

Einfach, oder? Aber lass dich nicht von seiner Einfachheit täuschen. Die Magie (oder das Unheil) passiert, wenn wir es in verschiedenen Kontexten verwenden.

JavaScript this im Globalen Gültigkeitsbereich

Wenn this im globalen Gültigkeitsbereich (außerhalb jeder Funktion) verwendet wird, bezieht es sich auf das globale Objekt. In einem Browser ist das usually das window-Objekt.

console.log(this === window); // true

this.myGlobalVar = "Ich bin global!";
console.log(window.myGlobalVar); // "Ich bin global!"

Hier ist this wie der VIP-Pass, der dir Zugang zu der gesamten Party (globaler Gültigkeitsbereich) gibt.

JavaScript this in einer Funktion

Wenn this in einer regulären Funktion verwendet wird, hängt sein Wert davon ab, wie die Funktion aufgerufen wird.

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

showThis(); // window (im nicht-strengen Modus)

In diesem Fall ist this wie ein verirrter Welpe, der sich an alles anhängt, was in der Nähe ist - was im nicht-strengen Modus das globale Objekt ist.

this in einer Funktion im Strengen Modus

Der strenge Modus ist wie der strenge Lehrer, der dir nichts durchgehen lässt. Im strengen Modus ist this innerhalb einer Funktion undefined,除非明确设置。

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

this in einer Konstruktorenfunktion

Wenn eine Funktion als Konstruktor (mit dem new-Keyword) verwendet wird, bezieht sich this auf das neu erstellte Objekt.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Hallo, ich bin " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Hallo, ich bin John"

Hier ist this wie die Geburtsurkunde, die die Identität des neu geborenen Objekts festlegt.

this in einer Pfeilfunktion

Pfeilfunktionen sind die Rebellen der JavaScript-Welt. Sie binden ihr eigenes this nicht, sondern erben es vom umgebenden Gültigkeitsbereich.

const obj = {
name: "Alice",
sayHello: () => {
console.log("Hallo, " + this.name);
}
};

obj.sayHello(); // "Hallo, undefined"

In diesem Fall bezieht sich this in der Pfeilfunktion nicht auf obj, sondern auf den umgebenden Gültigkeitsbereich (wahrscheinlich den globalen Gültigkeitsbereich).

this in der Methode eines Objekts

Wenn this in einer Methode (einer Funktion, die eine Eigenschaft eines Objekts ist) verwendet wird, bezieht es sich auf das Objekt, auf dem die Methode aufgerufen wurde.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

Hier ist this wie ein treuer Diener, der immer auf seinen Meister (das Objekt) verweist.

this in einer Kindfunktion einer Objektmethode

Hier kann es trickreich werden. In einer Funktion innerhalb einer Methode bezieht sich this nicht mehr auf das Objekt.

const restaurant = {
name: "Leckere Leckereien",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

In diesem Fall bezieht sich this in displayName() auf das globale Objekt, nicht auf restaurant.

JavaScript this in Ereignis-Handler

In Ereignis-Handler refers this typischerweise auf das Element, das das Ereignis empfangen hat.

<button id="myButton">Klicke mich!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Klicke mich!</button>
});
</script>

Hier ist this wie ein Spotlight, das auf den Star der Show - das geklickte Element - fokussiert.

Explizite Funktionsbindung in JavaScript

Manchmal wollen wir this genau sagen, was es sein soll. Wir können das mit call(), apply() oder bind() tun.

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Hallo, " + this.name);
}

sayHello.call(person1); // "Hallo, Alice"
sayHello.apply(person2); // "Hallo, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Hallo, Alice"

Diese Methoden sind wie ein Regisseur, der this genau sagt, welche Rolle es spielen soll.

JavaScript this-Priorität

Nun, lassen Sie uns die Priorität der this-Bindung zusammenfassen:

Regel	Priorität
new-Keyword	1 (Höchste)
Explizite Bindung (call, apply, bind)	2
Methodenaufruf	3
Funktionsaufruf	4 (Niedrigste)

Denken Sie daran, dass Pfeilfunktionen besonders sind und immer this vom umgebenden Gültigkeitsbereich erben.

Und das war's, Leute! Wir haben die Welt des this bereist und seine vielen Gesichter und Eigenarten erkundet. Denken Sie daran, das Verständnis von this ist wie das Fahrradfahren - es mag am Anfang wackelig sein, aber mit Übung werden Sie schnell davonfliegen. Weiter codieren, weiter erkunden und vor allem: Viel Spaß mit JavaScript!

Credits: Image by storyset