“this”的使用让我在 JavaScript 中感到困惑答案

【问题标题】：The use of "this" is confusing me in JavaScript“this”的使用让我在 JavaScript 中感到困惑
【发布时间】：2011-01-10 01:05:08
【问题描述】：

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

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

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

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

【问题讨论】：

不只是你——这是该语言更令人困惑的方面之一。你应该得到一些好的答案；我期待着阅读它们。

标签： javascript unobtrusive-javascript

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

【讨论】：

我认为应该是 x.init() 而不是 e.init() 但编辑是

【解决方案2】：

这很混乱。这取决于您如何调用该函数。 Doug Crockford 在他的书Javascript, the Good Parts 中写得很好。它的要点在this excellent answer 中，用于一个原本表述不当的问题。

不，这与性能无关。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

使用

var me = this;

在外面

function(){

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

【讨论】：