如何在 jquery 中保留“this”的上下文答案

【问题标题】：How can I keep the context of 'this' in jquery如何在 jquery 中保留“this”的上下文
【发布时间】：2009-06-25 12:05:58
【问题描述】：

我有这样的事情：

var Something = function(){
  this.render = function(){};
  $(window).resize(function(){
    this.render();
  });
}

问题在于匿名函数内部的“this”指的是窗口对象。我知道我可以这样做：

var Something = function(){
  this.render = function(){};
  var tempThis = this;
  $(window).resize(function(){
    tempThis.render();
  });
}

但是有更好的方法吗？这看起来不太优雅。

【问题讨论】：

您应该在“tempThis = this”之前放置一个“var”以确保正确的范围。

标签： javascript jquery this

【解决方案1】：

您找到的解决方案是大多数人使用的解决方案。通常的约定是将您的 tempThis 变量称为“那个”。

var Something = function(){
  this.render = function(){};
  var that = this;
  $(window).resize(function(){
    that.render();
  });
};

【讨论】：

有一个约定让它看起来更优雅:) 我喜欢“那个”。
+1 for that = this -> 这是我为这个问题找到的最优雅的方法。
支持 Douglas Crockford 推广（如果不是发明）该约定。 :-) javascript.crockford.com/private.html
请在“that”之前添加一个“var”，以免您的变量污染全局范围。另一种约定是将此变量称为“self”。
我曾经使用“self”，直到我注意到浏览器中有一个名为“self”的全局变量，有时它引用全局对象。如果你打错了什么，你的 this 再次成为全局对象，不会抛出任何错误，而且更难追踪，因为它看起来就像你做了正确的事情，但无论如何它做错了！

【解决方案2】：

这看起来是您最好的选择，我认为没有更好的方法。（如果我错了，请有人纠正我）。

【讨论】：

【解决方案3】：

仅供参考，next version of JQuery 提供了控制此功能的能力

【讨论】：

【解决方案4】：

我在很多紧张的情况下都这样做过。它看起来并不优雅，但它永远不会失败。实际上这就是 javascript 闭包的作用。

jrh

【讨论】：

【解决方案5】：

这正是我所做的。它也不特定于 jQuery。

var Construct = function() {
    var self = this; //preserve scope

    this.materials = 2000;

    this.build = function(){
        self.materials -= 100;
    };
};

记得在你的新作用域变量前面使用 var 关键字。否则，您将创建一个新的全局变量。作为局部变量，它仍然可以通过闭包在内部函数内部访问。

【讨论】：

【解决方案6】：

将变量保持在最低限度的最佳解决方案是使用 Function.prototype.bind() 方法。

var Something = function(){
  this.render = function(){};
  $(window).resize( this.render.bind( this ) );
}

这种方法可能会导致将来出现问题，这意味着您应该选择谨慎使用它，即当您需要调用$(this) 来获取元素时。所以，我可能建议在你的 resize 方法中使用Function.prototype.bind() 是值得的，但是在你可能需要直接定位被点击元素的点击函数中使用它并不是一个好的解决方案。

有关工作示例，请参阅此 JSFiddle。

查看Mozilla Documentation on Function.prototype.bind()了解更多信息

其他方法是可用的，但根据您的问题，创建一个变量来维护它的上下文是不希望的效果。

【讨论】：