如何在 JavaScript 回呼中正確存取「this」？

JavaScript 回呼中的這種關聯性

在JavaScript 中，利用事件處理程序回呼中的實例方法可以改變“this”的預期範圍呼叫回調的來源的實例。因此，經常使用類似以下範例的程式碼：

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

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

雖然功能強大，但這種方法可能看起來很奇怪。有沒有更優化的解決方案？

理解閉包和「this」親和性

這個問題超越了 jQuery，源自 JavaScript 對「this」和閉包的處理。閉包允許巢狀函數存取封閉函數中定義的變量，如下所示：

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

「但是，」行為不同。與在特定範圍內保持不變的普通變數不同，「this」可以在不同範圍內動態變化。

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

解決方案：給「this」起別名

來規避這個問題挑戰，JavaScript 允許我們將「this」分配給一個變量，本質上是給它起別名。這使我們能夠在整個巢狀函數中引用預期物件。

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

同樣的原則也適用於其他偽變量，例如「參數」。

以上是如何在 JavaScript 回呼中正確存取「this」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！