Verständnis 'dies' in JavaScript und sein Verhalten in verschiedenen Szenarien

wurde jemals von JavaScripts this Schlüsselwort verblüfft? Du bist nicht allein! Die Nuancen zu erfassen ist wie eine neue Fähigkeit zu lernen - es braucht Übung, aber sobald Sie es bekommen, klickt alles.

Dieser Blog -Beitrag Demystifies this, der sein Verhalten in verschiedenen Kontexten mit illustrativen Beispielen untersucht. Fangen wir an!

Was ist this?

In JavaScript ist this ein Schlüsselwort, das das Objekt darstellt, zu dem eine Funktion gehört. Es ermöglicht wiederverwendbare, dynamische Funktionen, indem der Wert zur Laufzeit festgelegt wird. Der Kontext des Funktionsaufrufs diktiert den Wert von this, wodurch er sowohl kraftvoll als auch manchmal verwirrend ist.

Schlüsselpunkte:

• this ist ein Schlüsselwort, keine Variable.
• Sie können this keinen Wert direkt zuweisen.
• sein Wert wird zur Laufzeit dynamisch bestimmt.

reale Analogie:

Stellen Sie sich this als Museum Tour Guide vor. Im Kunstmuseum repräsentiert der Führer das Kunstmuseum; Im Geschichtsmuseum repräsentieren sie das Geschichtsmuseum. In ähnlicher Weise passt this an seinen Kontext.

this In verschiedenen Szenarien:

1. Globaler Kontext (Standardbindung):

Außenfunktionen bezieht sich auf das globale Objekt. Dies variiert je nach Umgebung: this

• Browser (ohne strengen Modus): ist das this Objekt. window
• node.js (ohne strengen Modus): ist this (ein leeres Objekt), weil Node.js -Module ihren eigenen Bereich haben. {}

Beispiel:

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

Strenge Modus: Im strengen Modus bleibt in den Browsern und this in node.js. window undefined bleibt

Beispiel:

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

2. Innerhalb regulärer Funktionen:

In regulären Funktionen hängt der Wert von this davon ab, wie die Funktion aufgerufen wird.

• ohne strengen Modus: In Browsern ist this das window Objekt; In Node.js ist es das globale Objekt.
• mit strengen Modus: this ist undefined.

Beispiel:

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

3. Innerhalb von Objektmethoden (implizite Bindung):

Wenn eine Funktion die Methode eines Objekts ist, zeigt this auf dieses Objekt.

Beispiel:

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

4. Pfeilfunktionen:

Pfeilfunktionen haben nicht ihre eigene this. Sie erben es von ihrem umgebenden lexikalischen Bereich.

Beispiel:

<code class="language-javascript">console.log(this); // Browser: window object; Node.js: {}</code>

5. Konstruktorfunktionen (neue Bindung):

Mit dem Schlüsselwort new bezieht sich this auf das neu erstellte Objekt.

Beispiel:

<code class="language-javascript">'use strict';
console.log(this); // Browser: window object; Node.js: undefined</code>

6. Klassen:

In ES6 -Klassen verhält sich this ähnlich wie Konstruktorfunktionen.

Beispiel:

<code class="language-javascript">function showThis() {
  console.log(this);
}
showThis(); // Without strict mode: Browser - window; Node.js - global object; With strict mode: undefined</code>

7. call(), apply(), bind() (explizite Bindung):

Diese Methoden ermöglichen eine explizite Einstellung von this.

• call(): ruft die Funktion sofort auf und übergeben Sie Argumente einzeln.
• apply(): Ähnlich wie call(), aber Argumente als Array übergeben.
• bind(): Gibt eine neue Funktion mit this an ein bestimmtes Objekt zurück.

Beispiel:

<code class="language-javascript">const book = {
  title: 'JavaScript Mastery',
  showTitle: function() {
    console.log(this.title);
  }
};
book.showTitle(); // Output: JavaScript Mastery</code>

8. Event -Hörer:

In Event -Hörern bezieht sich this normalerweise auf das Element, das das Ereignis ausgelöst hat.

Beispiel:

<code class="language-javascript">const techBook = {
  title: 'Advanced JavaScript',
  showTitle: function() {
    const arrowFunc = () => {
      console.log(this.title);
    };
    arrowFunc();
  }
};
techBook.showTitle(); // Output: Advanced JavaScript</code>

Vorrangreihenfolge:

1. Neue Bindung
2. explizite Bindung
3. implizite Bindung
4. Standardbindung

Schlussfolgerung:

Mastering this ist entscheidend für das Schreiben von sauberem, kontextbewusster JavaScript. Das Verständnis seines Verhaltens in verschiedenen Szenarien ist zwar anfangs herausfordernd, ermöglicht es Ihnen, effektivere und wartbare Code zu schreiben. Übung ist der Schlüssel! Teile deine Erfahrungen mit this in den Kommentaren unten!

Das obige ist der detaillierte Inhalt vonVerständnis 'dies' in JavaScript und sein Verhalten in verschiedenen Szenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!