javascript - 引用错误 "object property is not defined"

Question

我有以下结构:

appInterface = { 
  mainWinCanvas: document.getElementById("mainwindow"),
  mainWinContext: mainWinCanvas.getContext("2d"),
  mainWinCanvasWidth: mainWinCanvas.width,
  mainWinCanvasHeight: mainWinCanvas.height, 
  mainWinCanvasData: mainWinContext.getImageData(0, 0, mainWinCanvasWidth, mainWinCanvasHeight)
}

并在 Firebug 中收到此错误:mainWinCanvas 未定义

是什么原因造成的？我确信该脚本是在 body 元素之前的子元素完全加载之后调用的。我的目标是使代码更具可读性，它的无对象版本正在工作:(

Answer 1

您所要做的就是将其包装在函数中并将其作为对象返回，以便 this 上下文应该可用于您当前的 appInterface 对象。还将您的属性转换为方法，以便您可以进行方法链接。

var appInterface = function () {
    return {
        canvas: null,
        ctx: null,
        mainWinCanvas: function (elem) {
            if (this.canvas === null) {
                this.canvas = document.getElementById(elem);
            }
            return this;
        },
        mainWinContext: function () {
            this.ctx = this.canvas.getContext("2d");
            return this;
        },
        mainWinCanvasWidth: function () {
            return this.canvas.width;
        },
        mainWinCanvasHeight: function () {
            return this.canvas.height;
        },
        mainWinCanvasData: function () {
            this.ctx.getImageData(0, 0, this.mainWinCanvasWidth(), this.mainWinCanvasHeight());
            return this;
        }
    };
};

用法:

appInterface().mainWinCanvas('mainWindow').mainWinContext().mainWinCanvasWidth();