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 is not defined

是什么造成的？我确定该脚本被称为AFTER body element之前的子元素已满载。我的目标是使代码更具可读性，它的无对象版本正在运行：（

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();

Answer 2

使用构造函数创建对象时，没有更多的编码：

function AppInterface (cnvid) { 
    this.mainWinCanvas = document.getElementById(cnvid);
    this.mainWinContext = this.mainWinCanvas.getContext("2d");
    this.mainWinCanvasWidth = this.mainWinCanvas.width;
    this.mainWinCanvasHeight = this.mainWinCanvas.height;
    this.mainWinCanvasData = this.mainWinContext.getImageData(0, 0, this.mainWinCanvasWidth, this.mainWinCanvasHeight);
}
var appInterface = new AppInterface("mainwindow");

如果您的应用中需要多个“appInterFace”，您甚至可以重复使用构造函数。

Answer 3

该对象没有本地上下文，您需要通过其主引用appInterface

进行访问

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

如果您想要使用本地上下文使用功能

修改

使用函数构造函数，您需要一个实时实例来进行自引用

var appInterface = new function(){ this.test = 4; }; appInterface = { anotherTest:appInterface.test } console.log(appInterface.test)

Answer 4

转义写入函数和getter / setter的一个蹩脚的解决方法是执行以下操作：

appInterface = new Object();
appInerface.mainWinCanvas = document.getElementById("mainwindow");
appInerface.mainWinContext = appInerface.mainWinCanvas.getContext("2d");
...

这是愚蠢的，我不是很深入JS，但是没有看到新的Object（）和相应的属性定义或问题中的结构之间的区别......

引用错误“未定义对象属性”

4 个答案: