Reference error "object property is not defined"

Question

I have the following structure:

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

and get this error in Firebug: mainWinCanvas is not defined

What's causing it? I'm sure the script is called AFTER body element previous children are fully loaded. My goal is to make the code more readable, it's no-object version is working :(

Answer 1

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.

Answer 2

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

Usage:

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

Answer 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 = new function(){
    this.test = 4;
};
appInterface = {
    anotherTest:appInterface.test
}

console.log(appInterface.test)

Answer 4

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

appInterface = new Object();
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 ...