為什麼在 JavaScript 中使用「var self = this」？

JavaScript 習慣用法：理解「var self = this」

「var self = Javathis;」這種習慣用法在Javathis;」很常見，尤其是在事件處理程序中。它允許您在巢狀函數或事件處理程序閉包內維護對原始“this”物件的參考。

當您在建構函式或物件內定義函數時，執行上下文會發生變化，並且「this」引用到非嚴格模式下的全域物件（視窗）。在嚴格模式下，「this」將是未定義的。為了避免這種情況，開發人員使用「var self = this」來保留對原始物件的參考。

為什麼要用「var self = this」？

考慮以下來自 WebKit 的 HTML5 SQL Storage Notes 演示的範例：

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

在此程式碼中，「self」被指派給「this」建構子。這確保了當調用事件處理程序時（例如單擊“note”div），“this”仍將引用原始 Note 對象，從而允許正確調用“onMouseDown”等方法。

「var self = this」常見嗎？

是的，這個習慣用法在 JavaScript 應用程式中廣泛使用，特別是在處理閉包時和事件處理程序。它允許開發人員在巢狀函數中維護對原始上下文的參考。

替代方法

雖然「var self = this」很有效，但它可能會令人困惑讀。另一種方法是使用箭頭函數（ES6 中引入），它保留周圍上下文的「this」綁定。

例如：

function Note() {
  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', (e) => { this.onMouseDown(e) });
  note.addEventListener('click', () => { this.onNoteClick() });
  this.note = note;
  // ...
}

注意：

現在不鼓勵使用“var self = this”，因為它可能由於存在而導致錯誤「窗口.self」。建議使用箭頭函數或其他替代方法來維護“this”綁定。

以上是為什麼在 JavaScript 中使用「var self = this」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！