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

Myślę, że nazwa zmiennej "self" nie powinna być już używana w ten sposób, ponieważ nowoczesne przeglądarki zapewniają globalną zmienną self wskazywanie na globalny obiekt zwykłego okna lub Webworkera.

Aby uniknąć nieporozumień i potencjalnych konfliktów, możesz zamiast tego napisać var thiz = this lub var that = this.

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

Zobacz jak self jest używany wewnątrz funkcji wywoływanych przez zdarzenia? Mają one swój własny kontekst, więc self jest używany do przechowywania this, które weszły do Note().

Powód self jest nadal dostępny dla funkcji, nawet jeśli mogą one wykonać tylko po zakończeniu wykonywania funkcji Note(), jest taki, że funkcje wewnętrzne otrzymują kontekst funkcji zewnętrznej ze względu na zamknięcie.

Należy również zauważyć, że istnieje alternatywny wzorzec Proxy do utrzymywania odniesienia do oryginalnego this w wywołaniu zwrotnym, jeśli nie lubisz idiomu var self = this.

Ponieważ funkcja może być wywołana z podanym kontekstem za pomocą function.apply lub function.call, możesz napisać wrapper, który zwróci funkcję, która wywoła twoją funkcję z apply lub call używając podanego kontekstu. Zobacz funkcję proxy jQuery dla implementacji tego wzorca. Oto przykład użycia it:

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

wrappedFunc następnie może być wywołana i będzie miała swoją wersję this jako kontekst.

Zmienna jest przechwytywana przez funkcje wbudowane zdefiniowane w metodzie. this w funkcji będzie odnosić się do innego obiektu. W ten sposób możesz sprawić, że funkcja będzie zawierała odwołanie do this w zewnętrznym zakresie.

To dziwactwo JavaScript. Gdy funkcja jest właściwością obiektu, trafniej nazywanego metodą, to odnosi się do obiektu. W przykładzie obsługi zdarzenia obiekt zawierający jest elementem, który wywołał zdarzenie. Gdy wywołana jest standardowa funkcja, Ta będzie odnosić się do obiektu globalnego. Jeśli masz zagnieżdżone funkcje, jak w twoim przykładzie, to w ogóle nie odnosi się do kontekstu zewnętrznej funkcji. Funkcje wewnętrzne dzielą zakres z zawiera funkcję, więc programiści będą używać odmian var that = this w celu zachowania tego , których potrzebują w wewnętrznej funkcji.

Jak wyjaśnili inni, var self = this; pozwala na kod w zamknięcie powrót do zakresu nadrzędnego.

Jednak jest teraz 2018 i ES6 jest szeroko obsługiwany przez wszystkie główne przeglądarki internetowe. Idiom var self = this; nie jest tak istotny jak kiedyś.

Jest teraz możliwe uniknięcie var self = this; poprzez użycie funkcje 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łek 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łasnego this i po prostu przyjmują zakres otaczający.

W rzeczywistości self jest odniesieniem do window (window.self), dlatego kiedy mówisz var self = 'something' nadpisujesz odniesienie do samego okna - ponieważ self istnieje w obiekcie window.

Dlatego większość programistów woli var that = this nad var self = this;

W każdym razie; var that = this; nie jest zgodne z dobrą praktyką ... zakładając, że Twój kod zostanie później poprawiony / zmodyfikowany przez innych programistów, powinieneś używać najbardziej popularnych standardów programowania w odniesieniu do społeczności programistów

Dlatego powinieneś użyj czegoś takiego jak var oldThis / var oThis / etc-żeby było jasne w swoim zakresie / / ..nie jest tak dużo, ale zaoszczędzi kilka sekund i kilka cykli mózgu

Jak wspomniano kilka razy powyżej, 'self' jest po prostu używany, aby zachować odniesienie do 'this' 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);