为什么返回undefined？

Question

var TTT = {
        canvas      : document.getElementById('canvas'),
        ctx         : canvas.getContext('2d'),
        cH          : 600,
        cW          : 600,
        // tile dimensions
        tH          : this.cH / 3,
        tW          : this.cW / 3
    };

// returns undefined... why? 
console.log(TTT.tH);

这非常简单，但我似乎无法理解为什么这是未定义的......

Answer 1

当您设置TTT.tH和tW时，this指的是周围的上下文，而不是对象本身。目前您也无法将其设置为TTT.cH，因为它尚未定义。您可以做的是在最初定义对象后设置它们。

var TTT = {
        canvas      : document.getElementById('canvas'),
        ctx         : canvas.getContext('2d'),
        cH          : 600,
        cW          : 600
    };

// tile dimensions
TTT.tH = TTT.cH / 3;
TTT.tW = TTT.cW / 3;

// returns undefined... why? 
console.log(TTT.tH);

编辑：正如Oriol的评论中指出的那样，您TTT.ctx也需要这样做，因为canvas尚未定义。

Answer 2

除了我发布的答案above之外，还有第二种完全不同的方法。那是使用getters and setters。

如果您不关心以后能够重置TTT.tH和TTT.tW，您可以将它们定义为getter：

var TTT = {
        canvas      : document.getElementById('canvas'),
        ctx         : canvas.getContext('2d'),
        cH          : 600,
        cW          : 600,
        // tile dimensions
        get tH() { return this.cH / 3 },
        get tW() { return this.cW / 3 }
    };

// returns undefined... why? 
console.log(TTT.tH);

在这里，它被定义为一个函数，因此this确实可以在那里工作。