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

Answer 2

这非常令人困惑。这取决于你如何调用该函数。道格·克罗克福德在他的书Javascript, the Good Parts中做了很好的写作。它的要点在于this excellent answer中一个非常严重的问题。

不，这不是关于表现。

Answer 3

对我而言，它对以下指南有很大帮助：每次看到this时都认为owner。拥有赋值函数的变量名称的对象将成为this。如果你对谁拥有它没有意义，那么this就是窗口。

Answer 4

关于this关键字的一篇优秀且具有启发性的文章是this（没有双关语意）。这篇文章可能会为你清理，我知道它对我有用。

基本规则是函数内的this关键字始终引用函数所有者，理解结果的关键是理解函数引用时何时< EM>复制。有关示例，请参阅前面提到的文章。

Answer 5

使用

var me = this;

以外的

function(){

然后你可以在函数（）

中引用我

帮助，“这个”让我在JavaScript中感到困惑

5 个答案: