Was liegt diesem JavaScript-Idiom zugrunde: var self = this?

Question

Ich habe folgendes in der Quelle für WebKit HTML 5 SQL Speicher Notes Demo :

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 (dem Funktionskörper) und este an anderen Stellen (den Körpern von Funktionen, die in der Argumentliste von Methoden definiert sind). Was ist hier los? Jetzt, wo ich es einmal bemerkt habe, werde ich es überall sehen?

Answer 1

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

self wird verwendet, um einen Verweis auf das Original zu erhalten this auch wenn sich der Kontext ändert. Diese Technik wird häufig in Ereignisbehandlungsroutinen verwendet (insbesondere in Closures).

Editer : Beachten Sie, dass die Verwendung von self wird nun entmutigt, da window.self existiert und kann zu Fehlern führen, wenn Sie nicht vorsichtig sind.

Wie Sie die Variable nennen, ist nicht besonders wichtig. var that = this; ist in Ordnung, aber der Name hat nichts Magisches an sich.

Funktionen, die innerhalb eines Kontexts deklariert werden (z.B. Callbacks, Closures), haben Zugriff auf die Variablen/Funktion, die im gleichen oder einem höheren Scope deklariert sind.

Zum Beispiel ein einfacher Ereignis-Callback:

function MyConstructor(options) {
  let that = this;

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

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

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

Answer 2

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

Um Verwirrung und mögliche Konflikte zu vermeiden, können Sie schreiben var thiz = this ou var that = this stattdessen.

Answer 3

Ja, Sie werden es überall sehen. Es ist oft that = this; .

Siehe wie self innerhalb von Funktionen verwendet wird, die von Ereignissen aufgerufen werden? Diese würden ihren eigenen Kontext haben, also self wird verwendet, um die this die sich in Note() .

Der Grund self steht den Funktionen weiterhin zur Verfügung, auch wenn sie erst nach der Ausführung der Note() Funktion ihre Ausführung beendet hat, ist, dass die inneren Funktionen den Kontext der äußeren Funktion aufgrund der Verschluss .

Answer 4

Es sollte auch beachtet werden, dass es ein alternatives Proxy-Muster gibt, um einen Verweis auf das Original zu erhalten this in einem Rückruf, wenn Sie die var self = this Idiom.

Da eine Funktion mit einem bestimmten Kontext aufgerufen werden kann, indem man function.apply ou function.call können Sie einen Wrapper schreiben, der eine Funktion zurückgibt, die Ihre Funktion mit apply ou call unter Verwendung des angegebenen Kontexts. Siehe jQuery's proxy Funktion für eine Implementierung dieses Musters. Hier ist ein Beispiel für die Verwendung dieses Musters:

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

wrappedFunc kann dann aufgerufen werden und hat Ihre Version von this als Kontext.

Answer 5

Wie andere bereits erklärt haben, var self = this; erlaubt Code in einem Verschluss um auf den übergeordneten Bereich zurückzugreifen.

Aber wir schreiben jetzt das Jahr 2018 und ES6 wird von allen wichtigen Webbrowsern unterstützt. Die var self = this; ist nicht mehr ganz so wichtig wie früher.

Es ist jetzt möglich, Folgendes zu vermeiden var self = this; durch den Einsatz von Pfeilfunktionen .

In den Fällen, in denen wir Folgendes 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 nun 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 eigene this und übernehmen einfach den umschließenden Bereich.