javascript - JavaScript 中 "this"的使用让我感到困惑

Question

使用 JavaScript 时最令人困惑的事情之一是使用 this

var x = {  
  ele : 'test',
  init : function(){ 
    alert(this.ele);
  }
}

但是，当处理多个对象，尤其是事件时，this 的上下文会发生变化，并且难以跟踪/理解。

因此，如果有人有更好的意见/指南/想法/更好的实践，请分享。另外我想知道使用 this 是否具有任何(性能)​​优势或什么？

Answer 1

这与性能无关，而是与访问对象特定实例的属性有关:-

x.init()

如果您未在函数中使用 this，则不会显示“test”。

上面的行实际上与:-

x.init.call(x);

当函数执行时，call使用中的第一个参数被赋值给this。

现在考虑:-

var fn = x.init;  //Note no () so the function itself is assigned to the variable fn
fn();

现在您在警报中什么也没有得到。这是因为上述内容实际上是:-

fn.call(window);

在浏览器托管的 Javascript 中，window 对象与全局对象同义。当“原始”调用函数时，this 默认为全局对象。

典型的错误是这样做:-

var x = {
   ele: 'test';
   init: function(elem) { 
      elem.onclick = function() { alert(this.ele); }
   }
}
x.init(document.getElementById('myButton'));

但是这不起作用，因为浏览器使用以下代码调用附加到 onclick 事件的函数:-

onclick.call(theDOMElement)

因此，当函数运行时，this 并不是您想象的那样。

对于这种情况我通常的解决方案是:-

var x = {
   ele: 'test';
   init: function(elem) {
      var self = this; 
      elem.onclick = function() { alert(self.ele); }
      elem = null;
   }
}
x.init(document.getElementById('myButton'));

请注意，elem = null 是 IE 内存泄漏的解决方法。