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

【问题标题】：Reference error "object property is not defined"引用错误“未定义对象属性”
【发布时间】：2014-02-16 14:07:54
【问题描述】：

我有以下结构：

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

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

【问题讨论】：

那么，该怎么办？似乎第一个评论者抹去了这个建议......
只需将属性名称替换为document.getElementById("mainwindow")（也可以在对象字面量之外缓存），或者使用getter，或者使用构造函数创建对象。
是的，但这给代码添加了太多字母。第二个想法很酷，但这意味着没有结构良好的对象。第三个似乎会添加更多代码。
是的，这是允许的，但只能将一个参数传递给 setter。当然，您可以在数组或对象中传递多个值。
如何为没有值的属性设置值？

标签： javascript reference defined

【解决方案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();

【讨论】：

这会在尝试添加 document.body.onload appInterface.CPanel.addEventListener('click', function(){}); 时删除另一个 TypeError: appInterface.CPanel is undefined
@Teemu 这不是我想要发布的，它发布得太早了。顺便说一句，我忘了将属性转换为方法。现在它应该可以工作了。
@RahilWazir 现在您的代码应该可以工作了。我没有投反对票，所以我也不能删除它......

【解决方案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”，您甚至可以重用构造函数。

【讨论】：

目前你的答案是最清晰的解决方案。

【解决方案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)

【讨论】：

你测试过这个吗？收到appInterface is undefined
是的，那么with对象是不行的，应该是函数
对于mainWinContext 我得到TypeError: appInterface is undefined

【解决方案4】：

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

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

这很愚蠢，我对 JS 的了解并不深入，但看不到 new Object() 与其属性的相应定义或问题中的结构之间的区别...

【讨论】：