Question

我正在使用John Resig的简单JavaScript继承，并且遇到了一个我正在失去'this'所指的问题。使用此代码：

var Runner = Class.extend({ 
 init: function() {
  this.update();
  if(!this.interval) {
   this.interval = setInterval(this.update, this.period * 1000);
  }
 },
 stop: function() {
  clearInterval(this.interval);
 },
 update: function() {
  this.success()
 },
 success: function(){
 }
});

var SubRunner = Runner.extend({
 update: function() {
  this._super();
 },
 success: function(){
  alert('sub runner success');
 }
});

正常运行p = new SubRunner()，第一次提醒sub runner success。在第一次运行之后，然后尝试在错误的'this'（窗口）上运行success函数。

我知道Prototype为你提供了一个绑定函数，这样你就可以将上下文传递给函数了，但是我没有运气在这里做类似的事情。有没有人有解决这个问题的起点？

谢谢！

Answer 1

问题是当你将this.update传递给setInterval函数时。在Javascript中，＆＃34; this＆＃34;取决于你使用点表示法调用函数，如果将它们作为回调传递或将它们存储在变量中，函数将不记得它们来自何处。

您可以添加包装函数

var that = this;
setTimeout(function(){ that.update() }, this.perios*1000)

或者您可以使用绑定方法（如果它在您的浏览器中可用）（或者您可以在Prototype中使用类似的功能）。

setTimeout(this.update.bind(this), this.period*1000)

Answer 2

将this.update传递给setInterval时会丢失上下文。最简单的解决方案是

var that = this;
this.interval = setInterval(function() { that.update() }, this.period * 1000);

Answer 3

this.interval = setInterval(this.update, this.period * 1000);

当setTimeout调用函数时，它会在全局范围内调用它（它将this设置为window）。

您需要传递一个调用this.update。

的函数

var self = this;
this.interval = setInterval(function(){
    self.update();
}, this.period * 1000);

Javascript继承并丢失'this'的上下文

3 个答案: