javascript - 无法读取未定义的属性 'getX'

Question

这是getX来自的vector.js

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

这是绘图的起始位置，从这里开始，moveTo 应该是相对的，但是它会因未定义的“getX”而中断

housePosition = new Vector(150, 100);

这是在 moveto 行上中断的地方

/*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);

这是 house.js，尽管我不认为这与错误有关。

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

为了提供一些上下文，房屋对象将相对于构造函数中的位置进行绘制，即:

housePosition = new Vector(150, 100);

Answer 1

让构造函数设置 this 的属性，而不是返回执行此操作的函数。欲了解更多信息，请参阅the MDN examples 。请参阅下面的示例:

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