Was liegt dieser JavaScript-Sprache zugrunde: var self = this?

In der Quelle für WebKit HTML 5 SQL Storage Notes Demo wurde Folgendes angezeigt :

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

Der Autor verwendet selbst an einigen Stellen (die Funktion Körper) und diese an anderen Orten (die Leichen in der Liste der Argumente von Methoden definiert Funktionen). Was ist los? Jetzt, wo ich es einmal bemerkt habe, werde ich es überall sehen?

Siehe diesen Artikel auf alistapart.com . (Ed: Der Artikel wurde seit dem ursprünglichen Link aktualisiert)

selfwird verwendet, um einen Verweis auf das Original beizubehalten, thisauch wenn sich der Kontext ändert. Diese Technik wird häufig in Event-Handlern verwendet (insbesondere bei Verschlüssen).

Bearbeiten: Beachten Sie, dass die Verwendung selfjetzt nicht mehr empfohlen wird window.selfund möglicherweise Fehler verursacht, wenn Sie nicht vorsichtig sind.

Was Sie die Variable nennen, spielt keine besondere Rolle. var that = this;ist in Ordnung, aber der Name hat nichts Magisches.

In einem Kontext deklarierte Funktionen (z. B. Rückrufe, Abschlüsse) haben Zugriff auf die Variablen / Funktionen, die im selben Bereich oder darüber deklariert wurden.

Zum Beispiel ein einfacher Ereignisrückruf:

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

Ich denke, der Variablenname 'self' sollte nicht mehr auf diese Weise verwendet werden, da moderne Browser eine globale Variableself bereitstellen , die auf das globale Objekt eines normalen Fensters oder eines WebWorkers verweist.

Um Verwirrung und mögliche Konflikte zu vermeiden, können Sie schreiben var thiz = thisoder var that = thisstattdessen.

Ja, du wirst es überall sehen. Es ist oft that = this;.

Sehen Sie, wie selfin Funktionen verwendet wird, die von Ereignissen aufgerufen werden? Diese würden ihren eigenen Kontext haben, also selfwird verwendet, um das zu halten this, was hereinkam Note().

Der Grund self, der den Funktionen weiterhin zur Verfügung steht, obwohl sie erst ausgeführt werden können, nachdem die Note()Funktion ausgeführt wurde, besteht darin, dass innere Funktionen aufgrund des Schließens den Kontext der äußeren Funktion erhalten .

Es sollte auch beachtet werden, dass es ein alternatives Proxy-Muster gibt, um einen Verweis auf das Original thisin einem Rückruf beizubehalten, wenn Sie das nicht mögenvar self = this Redewendung nicht .

Da eine Funktion mit einem bestimmten Kontext mithilfe von function.applyoder aufgerufen werden function.callkann, können Sie einen Wrapper schreiben, der eine Funktion zurückgibt, die Ihre Funktion mit applyoder unter callVerwendung des angegebenen Kontexts aufruft . proxyEine Implementierung dieses Musters finden Sie in der Funktion von jQuery . Hier ist ein Beispiel für die Verwendung:

var wrappedFunc = $.proxy(this.myFunc, this);

wrappedFunckann dann aufgerufen werden und hat Ihre Version thisals Kontext.

Wie andere erklärt haben, var self = this;erlaubt Code in einem Abschluss auf den übergeordneten Bereich zurückgreifen.

Es ist jedoch jetzt 2018 und ES6 wird von allen gängigen Webbrowsern weitgehend unterstützt. Dasvar self = this; Redewendung ist nicht mehr so ​​wichtig wie früher.

Es ist jetzt möglich, var self = this;durch die Verwendung von Pfeilfunktionen zu vermeiden .

In Fällen, in denen wir verwendet hätten var self = this:

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

Wir können jetzt eine Pfeilfunktion verwenden ohne var self = this:

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

Pfeilfunktionen haben keine eigenen thisund nehmen einfach den umschließenden Bereich an.

Die Variable wird von den in der Methode definierten Inline-Funktionen erfasst. thisin der Funktion wird auf ein anderes Objekt verweisen. Auf diese Weise können Sie festlegen, dass die Funktion einen Verweis auf den thisim äußeren Bereich enthält.

Es ist eine JavaScript-Eigenart. Wenn eine Funktion eine Eigenschaft eines Objekts ist, besser gesagt eine Methode, bezieht sich dies auf das Objekt. Im Beispiel eines Ereignishandlers ist das enthaltende Objekt das Element, das das Ereignis ausgelöst hat. Wenn eine Standardfunktion aufgerufen wird, dies wird auf das globale Objekt beziehen. Wenn Sie wie in Ihrem Beispiel verschachtelte Funktionen haben, bezieht sich dies überhaupt nicht auf den Kontext der äußeren Funktion. Innere Funktionen teilen den Gültigkeitsbereich mit der enthaltenen Funktion, sodass Entwickler Variationen von verwenden, var that = thisum das zu erhalten, was sie in der inneren Funktion benötigen.

Tatsächlich ist self ein Verweis auf window ( window.self), wenn Sie also sagen, dass var self = 'something'Sie einen Fensterverweis auf sich selbst überschreiben - weil self im Fensterobjekt existiert.

Dies ist , warum die meisten Entwickler bevorzugen var that = thisübervar self = this;

Wie auch immer; var that = this;Dies entspricht nicht der bewährten Vorgehensweise. Unter der Annahme, dass Ihr Code später von anderen Entwicklern überarbeitet / geändert wird, sollten Sie die gängigsten Programmierstandards in Bezug auf die Entwicklergemeinschaft verwenden

Daher sollten Sie so etwas wie var oldThis/ var oThis/ etc verwenden - um in Ihrem Bereich klar zu sein // ..ist nicht so viel, spart aber einige Sekunden und wenige Gehirnzyklen

Wie oben mehrfach erwähnt, wird "Selbst" einfach verwendet, um vor dem Eintritt in die Funktion einen Verweis auf "dies" zu behalten. Einmal in der Funktion 'dies' bezieht sich auf etwas anderes.

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call (thatt);