Cannot read property 'getX' of undefined

Question

This is the the vector.js of which getX is from

var Vector = (function () {
    function Vector(pX, pY) {
       this.setX(pX);
       this.setY(pY);

    }
    Vector.prototype.getX = function () {
        return this.mX;
    };
    Vector.prototype.setX = function (pX) {
        this.mX = pX;
    };

This is the start position of the drawing, from here the moveTo should be relative, however it breaks with undefined "getX"

housePosition = new Vector(150, 100);

This is where it breaks on the moveto line

/*global window, Vector, House, alert, drawHouse, draw, document, pPosition */
// the window load event handler
function onLoad() {

var mainCanvas, mainContext, housePosition, houses;
// this function will initialise our variables
function initialiseCanvasContext() {
    // Find the canvas element using its id attribute.
    mainCanvas = document.getElementById('mainCanvas');
    // if it couldn't be found
    if (!mainCanvas) {
        // make a message box pop up with the error.
        alert('Error: I cannot find the canvas element!');
        return;
    }
    // Get the 2D canvas context.
    mainContext = mainCanvas.getContext('2d');
    if (!mainContext) {
        alert('Error: failed to get context!');
        return;
    }
   housePosition = new Vector(150, 100);

    houses = [];
  //  houses.push(new House(new Vector(400, 300), '#ff0000'));

}
initialiseCanvasContext();

housePosition = new Vector(150, 100);

function drawHouse(pPosition) {

    // set the draw fill style colour to black
    mainContext.fillStyle = "#000000";
    mainContext.lineWidth = 3;
    // set the draw fill style colour to black
    mainContext.fillStyle = "#d9d9d9";
    // fill the canvas with black
    mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height);

    // house shape
    mainContext.fillStyle = '#00ff00';
    mainContext.strokeStyle = '#000000';
    mainContext.moveTo(pPosition.getX() - 10, pPosition.getY() - 10);
    mainContext.lineTo(pPosition.getX() - 10, pPosition.getY() - 10);
    mainContext.lineTo(pPosition.getX() - 10, pPosition.getY() - 10);
    mainContext.lineTo(pPosition.getX() - 10, pPosition.getY() - 10);
    mainContext.lineTo(pPosition.getX() - 10, pPosition.getY() - 10);
    mainContext.lineTo(pPosition.getX() - 10, pPosition.getY() - 10);
    mainContext.stroke();


    //Roof
    mainContext.beginPath();
    mainContext.fillStyle = '#ffcc00';
    mainContext.strokeStyle = '#000000';
    mainContext.moveTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.lineTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.lineTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.lineTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.fill();
    mainContext.stroke();

    //Roof
    mainContext.beginPath();
    mainContext.fillStyle = '#ffcc00';
    mainContext.strokeStyle = '#000000';
    mainContext.moveTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.lineTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.lineTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.lineTo(pPosition.getX() - 50, pPosition.getY() - 50);
    mainContext.fill();
    mainContext.stroke();

    // window 1
    mainContext.beginPath();
    mainContext.fillStyle = '#0066ff';
    mainContext.strokeStyle = '#000000';
    mainContext.moveTo(75, 210);
    mainContext.lineTo(75, 260);
    mainContext.lineTo(100, 260);
    mainContext.lineTo(100, 210);
    mainContext.lineTo(75, 210);
    mainContext.fill();
    mainContext.stroke();
    //Window 2
    mainContext.beginPath();
    mainContext.fillStyle = '#0066ff';
    mainContext.strokeStyle = '#000000';
    mainContext.moveTo(185, 210);
    mainContext.lineTo(185, 260);
    mainContext.lineTo(215, 260);
    mainContext.lineTo(215, 210);
    mainContext.lineTo(185, 210);
    mainContext.fill();
    mainContext.stroke();
    //Door
    mainContext.beginPath();
    mainContext.fillStyle = '#ff0000';
    mainContext.strokeStyle = '#000000';

    mainContext.moveTo(130, 210);
    mainContext.lineTo(130, 300);
    mainContext.lineTo(160, 300);
    mainContext.lineTo(160, 210);
    mainContext.lineTo(130, 210);
    mainContext.fill();
    mainContext.stroke();

}
   // drawHouse();
    drawHouse(housePosition);
}
window.addEventListener('load', onLoad, false);

This is the house.js, although I do not believe that this has a part in the error.

var House = (function () {
    function House(pPosition, pDoorColour) {
        this.setPosition(pPosition);
        this.setPosition(pDoorColour);
    }
    House.prototype.getPosition = function () {
        return this.mPosition;
};
House.prototype.setPosition = function (pPosition) {
    this.mPosition = pPosition;
};
House.prototype.draw = function (pContext) {
    pContext.moveTo(this.getPosition().getX() + 45, this.getPosition().getY() + 75);
    // example
};
return House;
}());

To give some context the house object will be drawn relative to the position in the contructor ie this:

housePosition = new Vector(150, 100);

Answer 1

Based on your incomplete code, I tried to find an acceptable behaviour.

I fixed your Vector declaration in order to define a constructor correctly, then defined your setters/getters using the closest syntax.

Try this :

function Vector(pX, pY) {
   this.setX(pX);
   this.setY(pY);

};
Vector.prototype.getX = function () {
    return this.mX;
};
Vector.prototype.setX = function (pX) {
    this.mX = pX;
};
Vector.prototype.getY = function () {
    return this.mY;
};
Vector.prototype.setY = function (pY) {
    this.mY = pY;
};

housePosition = new Vector(150, 100);

var x = housePosition.getX();
var y = housePosition.getY();
document.write(x+' '+y);

Answer 2

Make the constructor function set the properties on this, instead of returning a function that does that. For more info, refer to the MDN examples. And see the example below:

//just make this a function
function Vector(pX, pY) {
  this.setX(pX);
  this.setY(pY);
};
Vector.prototype.getX = function() {
  return this.mX;
};
Vector.prototype.setX = function(pX) {
  this.mX = pX;
};
Vector.prototype.getY = function() {
  return this.mY;
};
Vector.prototype.setY = function(pY) {
  this.mY = pY;
};
//delcare a variable in the local scope with the var keyword
//otherwise it will get put in the global scope
var housePosition = new Vector(150, 100);
drawHouse(housePosition);

function drawHouse(pPosition) {
  console.log('pPosition.getX():',pPosition.getX());
    // Filling the canvas
    // This is the first line in which a line will be drawn
   // mainContext.moveTo(pPosition.getX() - 10, pPosition.getY() - 10);
  }