var self = to?

Użycie metod instancji jako wywołań zwrotnych dla procedur obsługi zdarzeń zmienia zakres thisz „Moje wystąpienie” na „Cokolwiek, co właśnie wywołało wywołanie zwrotne” . Mój kod wygląda tak

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

Działa, ale czy to najlepszy sposób, aby to zrobić? Wygląda mi to dziwnie.

To pytanie nie jest specyficzne dla jQuery, ale ogólnie dotyczy JavaScript. Podstawowym problemem jest sposób „channelowania” zmiennej we wbudowanych funkcjach. Oto przykład:

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

Ta technika polega na użyciu zamknięcia. Ale to nie działa, thisponieważ thisjest pseudo zmienną, która może dynamicznie zmieniać się z zakresu na zakres:

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

Co możemy zrobić? Przypisz ją do jakiejś zmiennej i użyj jej przez alias:

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

thisnie jest pod tym względem wyjątkowy: argumentsto inna pseudo-zmienna, którą należy traktować w ten sam sposób - poprzez aliasing.

Tak, to wydaje się być powszechnym standardem. Niektórzy koderzy używają siebie, inni używają mnie. Jest używany jako odniesienie do „prawdziwego” obiektu, w przeciwieństwie do zdarzenia.

Zajęło mi to trochę czasu, na początku wygląda dziwnie.

Zwykle robię to bezpośrednio na górze mojego obiektu (wybacz mój kod demo - jest bardziej konceptualny niż cokolwiek innego i nie jest lekcją doskonałej techniki kodowania):

function MyObject(){
  var me = this;

  //Events
  Click = onClick; //Allows user to override onClick event with their own

  //Event Handlers
  onClick = function(args){
    me.MyProperty = args; //Reference me, referencing this refers to onClick
    ...
    //Do other stuff
  }
}

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

edycja: pomimo tego, zagnieżdżone funkcje w obiekcie przyjmują raczej globalny obiekt okna niż otaczający obiekt.

Jeśli wykonujesz ES2015 lub skrypt typu i ES5, możesz użyć funkcji strzałek w kodzie i nie napotykasz tego błędu, a to odnosi się do pożądanego zakresu w Twojej instancji.

this.name = 'test'
myObject.doSomething(data => {
  console.log(this.name)  // this should print out 'test'
});

Jednym z rozwiązań jest powiązanie całego wywołania zwrotnego z obiektem za pomocą bindmetody javascript .

Możesz to zrobić za pomocą nazwanej metody,

function MyNamedMethod() {
  // You can now call methods on "this" here 
}

doCallBack(MyNamedMethod.bind(this)); 

Lub z anonimowym oddzwonieniem

doCallBack(function () {
  // You can now call methods on "this" here
}.bind(this));

Wykonanie ich zamiast uciekania się do var self = thispokazuje, że rozumiesz, jak thiszachowuje się wiązanie w javascript i nie polega na odwołaniu do zamknięcia.

Ponadto operator grubej strzałki w ES6 jest w zasadzie tym samym wywołaniem .bind(this)anonimowej funkcji:

doCallback( () => {
  // You can reference "this" here now
});

Nie korzystałem z jQuery, ale w bibliotece takiej jak Prototype możesz powiązać funkcje z określonym zakresem. Mając to na uwadze, Twój kod wyglądałby tak:

 $('#foobar').ready('click', this.doSomething.bind(this));

Metoda bind zwraca nową funkcję, która wywołuje oryginalną metodę o określonym zakresie.

Wystarczy dodać do tego, że w ES6 z powodu funkcji strzałek nie powinieneś tego robić, ponieważ przechwytują thiswartość.

Myślę, że tak naprawdę zależy to od tego, co zamierzasz zrobić w ramach swojej doSomethingfunkcji. Jeśli chcesz uzyskać dostęp do MyObjectwłaściwości za pomocą tego słowa kluczowego, musisz go użyć. Ale myślę, że poniższy fragment kodu będzie działał również, jeśli nie robisz żadnych specjalnych rzeczy za pomocą object(MyObject)właściwości.

function doSomething(){
  .........
}

$("#foobar").ready('click', function(){

});