为什么在 JavaScript 中使用'var self = this”？

JavaScript 习惯用法：理解“var self = this”

“var self = this;”这种习惯用法在 JavaScript 代码中很常见，尤其是在事件处理程序中。它允许您在嵌套函数或事件处理程序闭包内维护对原始“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中文网其他相关文章！