Co leży u podstaw tego idiomu JavaScript: var self = this?

W źródle prezentacji WebKit HTML 5 SQL Storage Notes zobaczyłem następujące informacje :

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;
  // ...
}

Autor używa self w niektórych miejscach (ciało funkcji), a to w innych miejscach (ciała funkcji zdefiniowanych na liście argumentów metod). Co się dzieje? Teraz, kiedy to zauważyłem, czy zacznę widzieć wszędzie?

Zobacz ten artykuł na alistapart.com . (Ed: artykuł został zaktualizowany od czasu pierwotnego połączenia)

selfjest używany do zachowania odniesienia do oryginału, thisnawet gdy zmienia się kontekst. Jest to technika często stosowana w procedurach obsługi zdarzeń (szczególnie w zamknięciach).

Edycja: Zauważ, że używanie selfjest odradzane, ponieważ window.selfistnieje i może powodować błędy, jeśli nie będziesz ostrożny.

To, co nazywamy zmienną, nie ma szczególnego znaczenia. var that = this;jest w porządku, ale w nazwie nie ma nic magicznego.

Funkcje zadeklarowane w kontekście (np. Wywołania zwrotne, zamknięcia) będą miały dostęp do zmiennych / funkcji zadeklarowanych w tym samym zakresie lub powyżej.

Na przykład proste wywołanie zwrotne zdarzenia:

function MyConstructor(options) {
  let that = this;

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

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

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

Myślę, że nazwa zmiennej „ja” nie powinna być już używana w ten sposób, ponieważ współczesne przeglądarki zapewniają zmienną globalnąself wskazującą na globalny obiekt zwykłego okna lub WebWorkera.

Aby uniknąć zamieszania i potencjalnych konfliktów, możesz napisać var thiz = thislub var that = thiszamiast tego.

Tak, zobaczysz to wszędzie. Jest to często that = this;.

Zobacz, jak selfużywane są funkcje wywoływane przez zdarzenia? Miałyby one swój własny kontekst, więc selfsą używane do przechowywania tego, thisco weszło Note().

Przyczyny selfsą nadal dostępne dla funkcji, mimo że mogą one zostać uruchomione dopiero po Note()zakończeniu wykonywania funkcji, jest to, że funkcje wewnętrzne uzyskują kontekst funkcji zewnętrznej z powodu zamknięcia .

Należy również zauważyć, że istnieje alternatywny wzorzec proxy do utrzymywania odniesienia do oryginału thisw wywołaniu zwrotnym, jeśli nie podoba ci się ten var self = thisidiom.

Ponieważ funkcja może zostać wywołana z danym kontekstem za pomocą function.applylub function.call, możesz napisać opakowanie, które zwraca funkcję, która wywołuje twoją funkcję za pomocą applylub callza pomocą podanego kontekstu. Zobacz proxyfunkcję jQuery dla implementacji tego wzorca. Oto przykład użycia:

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

wrappedFuncmoże zostać następnie wywołany i będzie miał twoją wersję thisjako kontekst.

Jak wyjaśnili inni, var self = this;pozwala kodowi w zamknięciu odwoływać się z powrotem do zakresu nadrzędnego.

Jednak teraz jest 2018 i ES6 jest szeroko obsługiwany przez wszystkie główne przeglądarki internetowe. Thevar self = this; idiom nie jest tak niezbędny jak kiedyś.

Można teraz tego uniknąć var self = this;dzięki funkcjom strzałek .

W przypadkach, w których użylibyśmy var self = this:

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

Możemy teraz używać funkcji strzałki bez var self = this:

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

Funkcje strzałek nie mają własnych thisi po prostu przyjmują obejmujący zakres.

Zmienna jest przechwytywana przez funkcje wbudowane zdefiniowane w metodzie. thisw funkcji odniesie się do innego obiektu. W ten sposób możesz sprawić, by funkcja zawierała odwołanie do thiszewnętrznego zakresu.

To dziwactwo z JavaScript. Kiedy funkcja jest właściwością obiektu, chętniej zwana metoda, to odnosi się do obiektu. W przykładzie obsługi zdarzenia obiekt zawierający jest elementem, który wywołał zdarzenie. Przy standardowym funkcja jest wywoływana, to będzie odnosić się do globalnego obiektu. Gdy masz zagnieżdżone funkcje jak w przykładzie, to nie odnosi się do kontekstu funkcji zewnętrznej w ogóle. Funkcje wewnętrzne współdzielą zakres z funkcją zawierającą, więc programiści użyją odmian var that = this, aby zachować to, czego potrzebują w funkcji wewnętrznej.

W rzeczywistości self jest odniesieniem do okna (window.self ), dlatego kiedy mówiszvar self = 'something' że przesłonisz odwołanie do okna dla siebie - ponieważ self istnieje w obiekcie window.

To dlatego większość deweloperzy wolą var that = thisponadvar self = this;

Tak czy siak; var that = this;nie jest zgodne z dobrą praktyką ... zakładając, że Twój kod zostanie później zmieniony / zmodyfikowany przez innych programistów, powinieneś używać najpopularniejszych standardów programistycznych w odniesieniu do społeczności programistów

Dlatego powinieneś użyć czegoś takiego jak var oldThis/ var oThis/ etc - aby być jasnym w swoim zasięgu // .. to nie tyle, ale zaoszczędzi kilka sekund i kilka cykli mózgowych

Jak wspomniano kilka razy powyżej, „jaźń” jest po prostu używane do zachowania odniesienia do „tego” przed wejściem do funkcji. Raz w funkcji „to” odnosi się do czegoś innego.

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