Reference Error "object Property Is Not Defined"

I have the following structure: appInterface = { mainWinCanvas: document.getElementById('mainwindow'), mainWinContext: mainWinCanvas.getContext('2d'), mainWinCanvasWidth: ma

Solution 1:

All you have to do is wrap this in a function and return it as object so the this context should be available to your current appInterface Object. Also convert your properties to methods, so you can able to do method chaining.

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

Usage:

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

Solution 2:

There's not much more coding, when creating an object with a constructor function:

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

You can even reuse the constructor, if you'd need more than one "appInterFace" in your app.

Solution 3:

The object has no local context, you need to acces by its main reference 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)
}

If you want to have local context use functions instead

EDIT

use function constructor instead, you need a live instance for self referencing

var appInterface = newfunction(){
    this.test = 4;
};
appInterface = {
    anotherTest:appInterface.test
}

console.log(appInterface.test)

Solution 4:

One lame workaround to escape writting functions and getters/setters is to do the following:

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

This is stupid, i'm not deeply in JS but don't see the difference between new Object() and corresponging defining of its properties, or structure in the question ...