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答案似乎是我需要保护 this 引用，例如: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 正确设置为对您的对象的引用。

与其他一些语言不同，函数最初被定义为对象的属性这一事实并没有将函数本质上绑定(bind)到该对象。以同样的方式，如果你有一个对象，它的属性是一个简单的数字:

   maxLength: 25,

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