帮助,"这个"让我在JavaScript中感到困惑

Question

使用JavaScript的一个令人困惑的事情是使用它

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

这非常令人困惑.这取决于你如何调用该函数.道格·克罗克福德(Doug Crockford)在他的书" Javascript,Good Parts"中做了很好的写作.它的要点在于对一个非常严格的问题的优秀答案.

不,这不是关于性能.