Question

我在学习面向对象的Javascript方面遇到了一些麻烦。我有两个名为Cosmos和Background的课程，Cosmos看起来像这样：

// js/Cosmos.js
function Cosmos() {
    this.background = new Background();

    // Fire game loop
    this.ticker = setInterval(this.tick, 1000 / 60);
}

// Main game loop
Cosmos.prototype.tick = function() {
    console.log(this.background);
}

当主游戏循环打勾时，我在控制台中得到undefined。我不太明白这一点，因为this.background是Cosmos类的属性，所以它应该可以通过Cosmos类中定义的方法访问，不是吗？

如果我回到我的index.html页面的脚本标记并将其更改为：

// Lift off
var cosmos = new Cosmos();
console.log(cosmos.background);

它可以工作，Background对象被记录到控制台。任何人都可以提供解释并告诉我如何从Cosmos内访问Cosmos.tick的属性吗？

编辑：原来问题与setInterval()有关，因为如果我这样做，则将正确的对象记录到控制台：

function Cosmos() {
    this.background = new Background();

    // Fire game loop
    //this.ticker = setInterval(this.tick, 1000 / 60);
    this.tick();
}

// Main game loop
Cosmos.prototype.tick = function() {
    console.log(this.background);
}

但是，仍然不知道最好的方法。

Answer 1

从setInterval调用该函数时，this将不再绑定到该对象。

这是对您的问题的快速解决方法：

// js/Cosmos.js
function Cosmos() {
    var self = this;
    this.background = new Background();

    // Fire game loop
    this.ticker = setInterval(function () {
        self.tick();
    }, 1000 / 60);
}

通过使用self变量，内部函数可以访问this。

Answer 2

this的函数范围中的

setInterval为window，但您可以通过.bind更改功能范围（或者只是重新声明this，就像其他答案所说的那样）：

this.ticker = setInterval(this.tick.bind(this), 1000 / 60);

http://jsfiddle.net/ExplosionPIlls/SwQ5V/

从对象本身访问对象属性

2 个答案: