CODEWITHSUNDEEP
javascriptreferencedefined
1000Gbps
1000Gbps

Reputation: 1517

Reference error "object property is not defined"

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 :(

Upvotes: 0

Views: 3471

Answers (4)

Rahil Wazir
Rahil Wazir

Reputation: 10132

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

Upvotes: 2

Teemu
Teemu

Reputation: 23386

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.

Upvotes: 1

1000Gbps
1000Gbps

Reputation: 1517

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 ...

Upvotes: 0

markcial
markcial

Reputation: 9323

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)

Upvotes: 0

Related Questions