参考错误“未定义对象属性”

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元素，先前的子级已完全加载。 我的目标是使代码更具可读性，它的无对象版本正在工作:(

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的一种la脚的解决方法是执行以下操作：

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

这很愚蠢，我对JS的了解并不深，但是看不到new Object（）与相应定义其属性或问题结构的区别...