未定义的错误：使用返回HTML元素的函数创建对象

Question

我刚刚进入Javascript，所以这几乎肯定是一个新手问题。我试图通过以下方式创建对象：

var canvas = {
    element: function(){ return document.getElementById("bounceCanvas"); },
    centerX: element().width / 2,
    centerY: element().height / 2,
};

然而，我得到＆＃34; SCRIPT5009：＆＃39;元素＆＃39;未定义＆＃34;使用IE调试器。

对象声明靠近模块的顶部。我知道加载HTML元素可能需要一段时间，所以不要只是说：

element: document.getElementById("bounceCanvas");

我尝试使用一个将返回元素的函数，以便每次调用canvas.element()都会尝试从页面中检索它。为什么element()总是未定义？

Answer 1

使用this引用当前对象，然后指示该函数，否则该函数将在另一个属性的另一个属性上未定义：

var canvas = {
    element: function(){ return document.getElementById("bounceCanvas"); },
    centerX: this.element().style.width / 2,
    centerY: this.element().style.height / 2,
};