jQuery / JavaScript“这个”指针混淆

当这个functionbar被调用时,“this”的行为让我感到困惑。 请参阅下面的代码。 有没有什么办法来安排“这个”是一个简单的老js对象实例时,从一个点击处理程序调用栏,而不是HTML元素?

 // a class with a method function foo() { this.bar(); // when called here, "this" is the foo instance var barf = this.bar; barf(); // when called here, "this" is the global object // when called from a click, "this" is the html element $("#thing").after($("<div>click me</div>").click(barf)); } foo.prototype.bar = function() { alert(this); } 

欢迎来到JavaScript的世界! :d

你已经进入了JavaScript范围和closures领域。

简短的回答:

 this.bar() 

是在foo的范围内执行的(因为是指foo

 var barf = this.bar; barf(); 

在全球范围内执行。

这个.bar基本上是指:

this (foo)的范围内执行this.bar所指向的函数。 当您将this.bar复制到barf并运行barf时。 Javascript理解为,运行barf指向的函数,并且因为没有这个 ,所以它只运行在全局范围内。

要改正这一点,你可以改变

 barf(); 

像这样的东西:

 barf.apply(this); 

这告诉Javascript在执行它之前将这个范围绑定到barf。

对于jQuery的事件,你将需要使用匿名函数,或扩展在原型的绑定function,以支持范围。

欲了解更多信息:

  • 好的解释范围
  • 扩展jQuery绑定到supportscoping

在QuirksMode提供的JavaScript中有一个很好的解释。

你可能会发现这个:

在jQuery事件中控制“this”的值

或这个:

http://www.learningjquery.com/2007/08/what-is-this

有用。

获取书:JavaScript:好的部分。

此外,尽可能多地阅读Douglas Crockford http://www.crockford.com/javascript/

你可以在Function.apply上使用Function.apply来设置this应该引用的内容:

 $("#thing").after($("<div>click me</div>").click(function() { barf.apply(document); // now this refers to the document }); 

这是因为总是该函数所附带的实例。 在EventHandler的情况下,它是触发事件的类。

你可以用这样的匿名函数来帮助你自己:

 function foo() { var obj = this; $("#thing").after($("<div>click me</div>").click(function(){obj.bar();})); } foo.prototype.bar = function() { alert(this); } 
 this.bar(); // when called here, "this" is the foo instance 

当foo被用作普通函数而不是构造函数时,这个注释是错误的。 这里:

 foo();//this stands for window