„this' in JavaScript erklärt

Dies ist Frage Nr. 5 der Reihe Frontend-Interviewfragen. Wenn Sie Ihre Vorbereitung verbessern oder allgemein auf dem Laufenden bleiben möchten, sollten Sie sich für das Frontend Camp anmelden.

---

Das Schlüsselwort this bezieht sich immer auf den aktuellen Kontext einer Funktion oder eines Skripts.

Dies ist für die meisten von uns ein verwirrendes Thema (Wortspiel beabsichtigt), aber das muss nicht sein. Alles was Sie tun müssen, ist sich einige Regeln zu merken.

Die folgenden Regeln bestimmen in der Reihenfolge ihrer Priorität, wie der Wert während der Laufzeit bestimmt wird:

Verwendung in einem Funktionskonstruktor

Wenn eine Funktion mit dem Schlüsselwort new aufgerufen wird, verweist dies innerhalb der Funktion auf die neu erstellte Objektinstanz.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

Dies ist ausdrücklich verbindlich

call(), apply() oder bind() können verwendet werden, um den Wert davon innerhalb einer Funktion explizit festzulegen.

• call() und apply() werden verwendet, wenn eine Funktion sofort aufgerufen werden muss.
• bind() gibt eine neue Funktion zurück, die später verwendet werden soll.

const obj = { name: 'Ben' };

function sayHello() {
  console.log(`Hello, ${this.name}!`);
}

const sayHelloToBen = sayHello.bind(obj);

sayHelloToBen(); // Hello, Ben!
sayHello.call(obj); // Hello, Ben!
sayHello.apply(obj); // Hello, Ben!

Verwendung in einem Methodenaufruf

Wenn eine Funktion eine Methode eines Objekts ist, dann bezieht sich dies auf das Objekt.

const person = {
  name: 'Ben',
  logThis: function() {
    console.log(this);
  }
}

person.logThis(); // { name: 'Ben', logThis: fn() }

Verwendung in einem regulären Funktionsaufruf (kostenloser Funktionsaufruf)

Wenn eine Funktion im globalen Kontext aufgerufen wird, bezieht sich diese auf das globale Objekt (im nicht-strikten Modus) oder auf undefiniert (im strikten Modus).

Für Browser ist das globale Objekt window.

// Browser

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

showThis(); // Window { open: fn, alert: fn, ... }

Wenn eine Funktion im globalen Kontext deklariert wird, wird sie zu einer Eigenschaft des Fensterobjekts. Der Aufruf von window.showThis() würde zum gleichen Ergebnis führen. Aus diesem Grund handelt es sich um einen impliziten Methodenaufruf. (Siehe die obige Regel)

Wenn mehrere Regeln gelten, gilt die Regel mit der höheren Priorität.

const obj1 = {
    value: 1,
    showThis: function() {
        console.log(this);
    },
};

const obj2 = { value: 2 };

obj1.showThis.call(obj2); // { value: 2 }

Im obigen Beispiel werden zwei Regeln angewendet: Methodenaufruf und explizite Bindung. Da die explizite Bindung eine höhere Priorität hat, kann sie den Wert dafür festlegen.

Pfeilfunktionen

Pfeilfunktionen folgen nicht den oben genannten Regeln, da sie keinen eigenen Wert haben. Sie wählen diesen Wert aus dem übergeordneten Bereich aus.

const person = {
  name: 'Ben',
  showThis: () => {
    console.log(this);
  },
  showThisWrapped: function() {
    const arrowFn = () => console.log(this);
    arrowFn();
  }
}

person.showThis(); // Window { open: fn, alert: fn, ... }
person.showThisWrapped(); // { name: 'Ben', showThis: fn, showThisWrapped: fn }

Aus diesem Grund sollten Sie die Verwendung von Pfeilfunktionen für Ereignis-Listener vermeiden. Ereignis-Listener binden das HTML-Element an diesen Wert, aber wenn der Handler eine Pfeilfunktion ist, ist dies nicht möglich.

function Book(title) {
  console.log(this);
  this.title = title;
  console.log(this);
}

const book1 = new Book('Jungle Book');

// {}
// { title: "'Jungle Book' }"

console.log(book1.name); // 'Jungle Book'

---

Zusammenfassung

1. In einem Funktionskonstruktor (neue Person()) ist dies die neu erstellte Objektinstanz.
2. Bei expliziter Bindung mit bind(), call() oder apply() wird dies innerhalb der Funktion auf den bereitgestellten Wert gesetzt.
3. Innerhalb einer Methode wird dies auf das Objekt festgelegt, dessen Eigenschaft die Methode ist.
4. Innerhalb eines kostenlosen Funktionsaufrufs verweist dies auf ein globales Objekt (nicht strenger Modus) oder ein undefiniertes Objekt (strenger Modus).
5. Wenn mehrere Regeln gelten, gilt die zuerst angegebene Regel (1-4).
6. Pfeilfunktionen haben keine eigene Funktion. Sein Wert wird aus dem übergeordneten Bereich ausgewählt.

---

Gefällt Ihnen, was Sie gerade gelesen haben? Erwägen Sie, sich auf die Warteliste im Frontend Camp einzutragen ✌️

Das obige ist der detaillierte Inhalt von„this' in JavaScript erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!