Warum sich „dies' in JavaScript von anderen OOP-Sprachen unterscheidet

Das this-Schlüsselwort von JavaScript sorgt oft für Verwirrung, insbesondere bei Entwicklern, die Sprachen wie C#, Java oder Python verwenden, bei denen sich self durchgängig auf die aktuelle Objektinstanz bezieht. Im Gegensatz zu diesen Sprachen ist this in JavaScript dynamisch, sein Wert wird durch den Aufrufkontext der Funktion bestimmt. Dieser Leitfaden fasst die verschiedenen Szenarien zusammen, die sich auf das Verhalten von this auswirken.

1. Globaler Geltungsbereich:

• Nicht-strikter Modus: this zeigt auf das globale Objekt (window in Browsern, global in Node.js).

<code class="language-javascript">console.log(this); // window or global</code>

• Strikter Modus: this ist undefined.

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

2. Innenfunktionen:

• Reguläre Funktionen: Im nicht-strikten Modus bezieht sich this auf das globale Objekt; im strengen Modus ist es undefined.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

3. Objektmethoden:

• Wenn eine Funktion als Objektmethode aufgerufen wird, bezieht sich this auf dieses Objekt.

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  greet() {
    console.log(this.name); // this refers to myObj
  }
};
myObj.greet(); // Output: JavaScript</code>

4. Pfeilfunktionen:

• Pfeilfunktionen haben keine eigenen this. Sie erben this von ihrem lexikalischen Geltungsbereich (umgebenden Kontext).

<code class="language-javascript">const myObj = {
  name: "JavaScript",
  arrowFunc: () => {
    console.log(this.name); // Inherits this from the global scope
  }
};
myObj.arrowFunc(); // undefined (in browsers, this is window)</code>

5. Konstrukteure:

• Innerhalb einer Konstruktorfunktion oder -klasse bezieht sich this auf die neu erstellte Instanz.

<code class="language-javascript">class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // Output: Hello, Alice</code>

6. Explizite Bindung (call, apply, bind):

JavaScript-Funktionen sind Objekte mit Methoden (call, apply, bind) zum expliziten Festlegen von this.

• call und apply rufen die Funktion mit einem angegebenen this-Wert auf. call verwendet durch Kommas getrennte Argumente; apply benötigt ein Array.

<code class="language-javascript">function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

const user = { name: "Alice" };
greet.call(user, "Hello"); // Output: Hello, Alice
greet.apply(user, ["Hi"]); // Output: Hi, Alice</code>

• bind gibt eine neue Funktion zurück, die this dauerhaft gebunden ist.

<code class="language-javascript">const boundGreet = greet.bind(user);
boundGreet("Hello"); // Output: Hello, Alice</code>

7. Ereignis-Listener:

• Reguläre Funktionen: this bezieht sich auf das Element, das das Ereignis auslöst.

<code class="language-javascript">const btn = document.querySelector("button");
btn.addEventListener("click", function() {
  console.log(this); // The button element
});</code>

• Pfeilfunktionen: this erbt vom umgebenden Bereich, nicht vom Element.

<code class="language-javascript">btn.addEventListener("click", () => {
  console.log(this); // this depends on the arrow function's definition context
});</code>

8. setTimeout / setInterval:

• Reguläre Funktionen: this standardmäßig das globale Objekt.

<code class="language-javascript">setTimeout(function() {
  console.log(this); // window in browsers
}, 1000);</code>

• Pfeilfunktionen: this wird lexikalisch vererbt.

<code class="language-javascript">setTimeout(() => {
  console.log(this); // Inherits this from surrounding context
}, 1000);</code>

9. Klassen:

• Innerhalb einer Klassenmethode bezieht sich this auf die Klasseninstanz.

<code class="language-javascript">console.log(this); // window or global</code>

10. Kontextverlust (Methodenextraktion):

Das Zuweisen einer Methode zu einer Variablen oder die Übergabe als Rückruf kann zu einem thisBindungsverlust führen.

<code class="language-javascript">"use strict";
console.log(this); // undefined</code>

Lösungen: Verwenden Sie .bind(obj) oder eine Pfeilfunktion, um den Kontext beizubehalten.

11. newStichwort:

Die Verwendung von new mit einer Funktion erstellt ein neues Objekt und this verweist auf dieses Objekt.

<code class="language-javascript">function myFunc() {
  console.log(this); 
}
myFunc(); // window (non-strict), undefined (strict)</code>

Übersichtstabelle:

Kontext

Context	this Refers To
Global (non-strict)	Global object (window/global)
Global (strict)	undefined
Object Method	The object owning the method
Arrow Function	Lexical scope (surrounding context)
Constructor/Class	The instance being created
call, apply, bind	Explicitly defined value
Event Listener	The element triggering the event
setTimeout/setInterval	Global object (regular function), lexical scope (arrow function)
new Keyword	The newly created object

Bezieht sich auf Global (nicht streng) Globales Objekt (Fenster/Global) Global (streng) undefiniert Objektmethode Das Objekt, dem die Methode gehört Pfeilfunktion Lexikalischer Geltungsbereich (umgebender Kontext) Konstruktor/Klasse Die Instanz, die erstellt wird call, apply, bind Explizit definierter Wert Ereignis-Listener Das Element, das das Ereignis auslöst setTimeout/setInterval Globales Objekt (reguläre Funktion), lexikalischer Geltungsbereich (Pfeilfunktion)

Schlüsselwort

Das neu erstellte Objekt thisDas Verständnis dieser Szenarien ist entscheidend für das Schreiben korrekten und vorhersehbaren JavaScript-Codes. Denken Sie daran, bei Bedarf Techniken wie die explizite Bindung zu nutzen, um unerwartetes Verhalten zu vermeiden.

Das obige ist der detaillierte Inhalt vonWarum sich „dies' in JavaScript von anderen OOP-Sprachen unterscheidet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!