5 Möglichkeiten, den this-Zeiger von JS korrekt zu handhaben

Ich ändere gerne den Zeiger des Funktionsausführungskontexts in JS, auch bekannt als dieser Zeiger.

Zum Beispiel können wir Array-Methoden für Array-ähnliche Objekte verwenden:

const reduce = Array.prototype.reduce;

function sumArgs() {
  return reduce.call(arguments, (sum, value) => {
    return sum += value;
  });
}

sumArgs(1, 2, 3); // => 6

Andererseits ist dies schwer zu verstehen.

Wir stellen oft fest, dass wir dies verwenden, um falsch zu zeigen. Im Folgenden erfahren Sie, wie Sie dies einfach an den gewünschten Wert binden.

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

Bevor ich anfange, benötige ich eine Hilfsfunktionexecute(func), die nur die als Parameter bereitgestellte Funktion ausführt.

function execute(func) {
  return func();
}

execute(function() { return 10 }); // => 10

Jetzt kommen wir zum Verständnis der Natur des Fehlers, der damit einhergeht: Methodentrennung.

1. Methodentrennungsproblem

Angenommen, es gibt eine Klasse Person, die die Felder Vorname und Nachname enthält. Darüber hinaus gibt es eine Methode getFullName(), die den vollständigen Namen der Person zurückgibt. Wie unten gezeigt:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = function() {
    this === agent; // => true
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'

Sie können sehen, dass die Person-Funktion als Konstruktor aufgerufen wird: new Person('front end', 'Xiao Zhi'). Dies innerhalb der Funktion stellt die neu erstellte Instanz dar.

getfullname() gibt den vollständigen Namen der Person zurück: „front-end Xiaozhi“. Wie erwartet ist dies innerhalb der getFullName()-Methode gleich agent.

Was passiert, wenn die Hilfsfunktion die Methode agent.getFullName ausführt:

execute(agent.getFullName); // => 'undefined undefined'

Das Ausführungsergebnis ist falsch: „undefiniert undefiniert“, was ein Problem ist, das durch eine falsche Ausrichtung verursacht wird.

In der Methode getFullName() ist der Wert davon nun das globale Objekt (Fenster in der Browserumgebung). Dies entspricht dem Fenster und das Ausführungsergebnis von ${window.firstName} ${window.lastName} ist „undefiniert undefiniert“.

Dies geschieht, weil die Methode vom Objekt getrennt wird, wenn „execute(agent.getFullName)“ aufgerufen wird. Im Grunde handelt es sich lediglich um einen regulären Funktionsaufruf (keinen Methodenaufruf):

execute(agent.getFullName); // => 'undefined undefined'

// 等价于:

const getFullNameSeparated = agent.getFullName;
execute(getFullNameSeparated); // => 'undefined undefined'

Das nennt man, wenn eine Methode von ihrem Objekt getrennt wird. Wenn eine Methode getrennt und dann ausgeführt wird, hat dies keine Verbindung dazu das Originalobjekt.

1. Um sicherzustellen, dass dies innerhalb der Methode auf das richtige Objekt zeigt, muss dies getan werden

2. Führen Sie die Methode in Form eines Eigenschaftszugriffs aus: agent.getFullName( ) oder diese statisch binden Das Problem der Trennung von

-Methoden von den enthaltenen Objekten (mithilfe von Pfeilfunktionen, .bind()-Methoden usw.) und der daraus resultierenden falschen Ausrichtung darauf tritt im Allgemeinen in den folgenden Situationen auf :

Rückrufe

// `methodHandler()`中的`this`是全局对象
setTimeout(object.handlerMethod, 1000);

Beim Einrichten von Event-Handlern

// React: `methodHandler()`中的`this`是全局对象
<button onClick={object.handlerMethod}>
  Click me
</button>

Dann werden einige nützliche Methoden vorgestellt, z. B. if Die Methode wird vom Objekt getrennt. So stellen Sie sicher, dass dieser Punkt auf das gewünschte Objekt zeigt.

2. Schließen Sie den Kontext

Der einfachste Weg, diesen Verweis auf die Klasseninstanz beizubehalten, ist die Verwendung einer zusätzlichen Variablen self:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  const self = this;
  this.getFullName = function() {
    self === agent; // => true
    return `${self.firstName} ${self.lastName}`;
  }
}
const agent = new Person('前端', '小智');
agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

getFullName() schließt statisch die Variable self und bindet diese effektiv manuell.

Jetzt funktioniert beim Aufruf vonexecute(agent.getFullName) alles einwandfrei, da dies innerhalb der getFullName()-Methode immer auf den richtigen Wert zeigt.

3. Verwendung von Pfeilfunktionen

Gibt es eine Möglichkeit, dies statisch ohne zusätzliche Variablen zu binden? Ja, genau das machen Pfeilfunktionen.

Verwenden Sie Pfeilfunktionen, um Person zu rekonstruieren:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;

  this.getFullName = () => `${this.firstName} ${this.lastName}`;
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

Pfeilfunktionen binden dies lexikalisch. Einfach ausgedrückt verwendet es den Wert der externen Funktion dort, wo er definiert ist.

Es wird empfohlen, Pfeilfunktionen in allen Fällen zu verwenden, in denen ein externer Funktionskontext erforderlich ist.

4. Bindungskontext

Gehen wir nun einen Schritt weiter und rekonstruieren Person mithilfe von Klassen in ES6.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => 'undefined undefined'

Leider gibtexecute(agent.getFullName) auch mit der neuen Klassensyntax immer noch „undefiniert undefiniert“ zurück.

Bei Klassen funktioniert es nicht, eine zusätzliche Variable self oder eine Pfeilfunktion zu verwenden, um zu beheben, worauf dies verweist.

Aber es gibt einen Trick mit der bind()-Methode, der den Kontext der Methode in den Konstruktor bindet:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    this.getFullName = this.getFullName.bind(this);
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

this.getFullName im Konstruktor = this.getFullName.bind( this ) bindet die Methode getFullName() an die Klasseninstanz.

execute(agent.getFullName) funktioniert wie erwartet und gibt „frontend Xiaozhi“ zurück.

5. Die Fat-Arrow-Methode

Bind-Methode ist etwas zu ausführlich, wir können die Fat-Arrow-Methode verwenden:

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getFullName = () => {
    return `${this.firstName} ${this.lastName}`;
  }
}

const agent = new Person('前端', '小智');

agent.getFullName();        // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'

Die Fat-Pfeil-Methode getFullName =() =>{…} ist an die Klasseninstanz gebunden, auch wenn die Methode von ihrem Objekt getrennt ist.

Diese Methode ist die effizienteste und prägnanteste Möglichkeit, dies in einer Klasse zu binden.

6. Zusammenfassung

Vom Objekt getrennte Methoden verursachen das Problem einer falschen Ausrichtung. Um dies statisch zu binden, können Sie manuell eine zusätzliche Variable self verwenden, um das richtige Kontextobjekt zu speichern. Eine bessere Alternative ist jedoch die Verwendung von Pfeilfunktionen, die im Wesentlichen dazu dienen, dies lexikalisch zu binden.

In einer Klasse können Sie die Methode bind() verwenden, um die Klassenmethode manuell im Konstruktor zu binden. Wenn Sie nicht die langwierige Bindungsmethode verwenden müssen, können Sie natürlich auch die prägnante und praktische Darstellungsmethode für fette Pfeile verwenden.

Originaltext: https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter5.md

Dieser Artikel stammt von js Tutorial Kolumne, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt von5 Möglichkeiten, den this-Zeiger von JS korrekt zu handhaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!