javascript对象，自引用问题

Question

我刚刚开始在 javascript 中使用 oop，在尝试从另一个方法内部访问一个方法时遇到了一些问题。

这是我的代码：

var Game = {
initialize: function () {
    if (canvas.isSupported()) {
        sprites[0] = new Player();

        this.update();
    }
},

update: function() {
    for (var i = 0; i < sprites.length; i++) {
        sprites[i].update();
    }

    this.draw();
},

draw: function() {
    this.clear();

    for (var i = 0; i < sprites.length; i++) {
        sprites[i].draw();
    }

    setTimeout(this.update, 10);
},

clear: function() {
    canvas.context.clearRect(0, 0, canvas.element.width, canvas.element.height);
}

}

但是调用 Game.update() 会给出一个错误，表明未定义绘制方法。 我找不到真正的解决方案。 最终我发现了这个 How to call a method inside a javascript object< /a> 答案似乎是我需要保护此引用，例如： var _this = this; 但我无法让它以文字表示法工作，所以我将代码更改为对象构造函数（我猜这就是它的调用方式）并添加了变量。

然后我改为

this.draw();

并且

_this.draw();

它起作用了。

尽管

this.clear();

和 this.update() 仍然相同，但它们似乎从来没有给出错误。

谁能解释这是为什么吗？也许给我指出一个更好的解决方案？ 提前致谢。

更新

应该是这样的：

var Game = function () {
var _this = this;

this.initialize = function () {
    if (canvas.isSupported()) {
        sprites[0] = new Player();

        this.update();
    }
}

this.update = function () {
    for (var i = 0; i < sprites.length; i++) {
        sprites[i].update();
    }

    this.draw();
}

this.draw = function () {
    this.clear();

    for (var i = 0; i < sprites.length; i++) {
        sprites[i].draw();
    }


    setTimeout(function () { _this.update(); }, 10);
}

this.clear = function () {
    canvas.context.clearRect(0, 0, canvas.element.width, canvas.element.height);
}

}

Answer 1

当您这样做时：

setTimeout(this.update, 10);

确实正确地将对“更新”函数的引用传递给系统，但是当浏览器稍后实际调用该函数时，它将不知道this 应该是。您可以执行以下操作：

var me = this;
setTimeout(function() { me.update(); }, 10);

这将确保在调用“update”时，将使用正确设置的 this 作为对对象的引用来调用它。

与其他一些语言不同，函数最初被定义为对象的属性，这一事实并不本质上将该函数绑定到该对象。同样，如果您有一个具有属性的对象，那么它就是一个简单的数字：

   maxLength: 25,

那么值“25”不会与该对象有任何特别的关系；这只是一个值。在 JavaScript 中，函数也只是值。因此，程序员有责任确保每当以某种“特殊”方式调用函数时将 this 设置为适当的值。

Answer 2

您的问题是您使用对象文字而不是实例化对象

尝试这样做：

var Game = function() {
  this.initialize = function () {
    if (canvas.isSupported()) {
      sprites[0] = new Player();
      this.update();
    }
  };
  this.update = function() {
    for (var i = 0; i < sprites.length; i++) {
        sprites[i].update();
    }

    this.draw();
  };

  this.draw = function() {
    this.clear();

    for (var i = 0; i < sprites.length; i++) {
        sprites[i].draw();
    }

    setTimeout(this.update, 10);
  };

  this.clear = function() {
    canvas.context.clearRect(0, 0, canvas.element.width, canvas.element.height);
  };
}

现在使用：

 var myGame = new Game();