javascript - “this”的使用让我在 JavaScript 中感到困惑

Question

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

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

然而，当处理多个对象，尤其是事件的this变化上下文时，会变得难以跟踪/理解。

因此，如果有人有更好的输入/指南/想法/更好的做法，请分享。另外我想知道使用是否会this带来任何（性能）​​优势或什么？

Answer 1

这不是关于性能，而是关于访问对象的特定实例的属性：-

x.init()

如果您没有this在函数中使用，则不会显示“测试”。

实际上，上述行与以下内容相同：-

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 内存泄漏解决方法。

Answer 2

这非常令人困惑。这取决于您如何调用该函数。Doug Crockford 在他的书Javascript, the Good Parts中写了一篇很好的文章。它的要点在于对一个原本表述不当的问题的出色回答。

不，这与性能无关。

Answer 3

对我来说，它对以下准则有很大帮助：每次看到thisthink owner. 拥有分配函数的变量名的对象将成为this. 如果您无法弄清楚谁拥有它，那么this将是窗口。

Answer 4

this关于关键字的一篇很好且有启发性的文章是this（不是双关语）。这篇文章可能会为您解决问题，我知道它对我有用。

基本规则是this函数内部的关键字总是指函数所有者，理解后果的关键是理解函数何时被引用以及何时被复制。有关示例，请参见前面提到的文章。

Answer 5

采用

var me = this;

之外

function(){

那么你可以在function()里面引用我