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

Das ist eine JavaScript-Macke. Wenn eine Funktion ist eine Eigenschaft eines Objekts, mehr treffend eine Methode genannt, este bezieht sich auf das Objekt. Im Beispiel eines Event-Handlers ist das enthaltende Objekt das Element, das das Ereignis ausgelöst hat. Wenn eine Standardfunktion aufgerufen wird, este verweist auf das globale Objekt. Wenn Sie verschachtelte Funktionen wie in Ihrem Beispiel haben, este steht in keinem Zusammenhang mit dem Kontext der äußeren Funktion. Innere Funktionen haben einen gemeinsamen Geltungsbereich mit der enthaltenden Funktion, daher verwenden Entwickler Variationen von var that = this zur Erhaltung der este die sie für die innere Funktion benötigen.

Answer 2

Die Variable wird von den in der Methode definierten Inline-Funktionen erfasst. this in der Funktion auf ein anderes Objekt verweist. Auf diese Weise können Sie die Funktion dazu bringen, einen Verweis auf das this im äußeren Bereich.

Answer 3

Eigentlich ist self ein Verweis auf window ( window.self ) Wenn Sie also sagen var self = 'something' Sie überschreiben einen Fensterverweis auf sich selbst - weil self im Fensterobjekt existiert.

Aus diesem Grund bevorzugen die meisten Entwickler var that = this über var self = this;

Wie auch immer; var that = this; entspricht nicht der guten Praxis ... in 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 etwas wie var verwenden oldThis / var oThis / etc - um in Ihrem Bereich klar zu sein // ..ist nicht viel, aber es spart ein paar Sekunden und ein paar Gehirnwindungen

Answer 4

Wie bereits mehrfach erwähnt, wird "self" lediglich verwendet, um vor dem Eintritt in die Funktion einen Verweis auf "this" zu erhalten. Einmal in der Funktion verweist "this" auf etwas anderes.

Answer 5

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);