繼承後無法獲得Javascript對象來構建（在對象內）

Question

我已經爲一個遊戲創建了一個Player類的Javascript對象，我一直在使用下面的行從Collidable類「繼承」：

Player.prototype = new Collidable(50, 50, 70); 

這可碰撞類有一個Vector類，這是在我的代碼實例等的實例：

this.pos = new Vector(x, y) || new Vector(50, 50); 

我的問題是，我可以創造一個新的可碰撞的對象就好了，和向量裏面將有在01的前兩個參數中給出的x和y的值部分。但是，當創建新播放器時（current = new Player();），x和y的向量值將變爲NaN。

下面我已經包含了Collidable構造函數和Player構造函數的代碼。

可碰撞：

Collidable = function Collidable(x, y, d){ 
    this.pos = new Vector(x, y) || new Vector(50, 50); // Position of centre 
    this.diam = d || 50; // Diameter 
    this.col = new Color().randomRGB(); // For debug 
} 
// More functions below 

球員：

Player = function Player(){ 
    this.health = 100; 
    this.facing = 0; 
    this.sprites = new Image(); 
    this.sprites.src = "./npc-oldman1.png"; 
    this.spriteNo = 0; 
    this.moveSpeed = 2; 
} 

Player.prototype = new Collidable(50, 50, 70); 
// More functions below 

我懷疑這是關係到this的問題，但一直沒能制定出什麼錯誤。

我的完整代碼是here。它應該做的是顯示一個老人的圖像，該老人移動到鼠標點擊的位置（它在（50,50）（創建玩家的地方）處開始閃爍，或者當您手動更改pos值時） 。在添加Collisions類之前，我已經使用了代碼。

在此先感謝。

Answer 1

你vector.js代碼做這個檢查：

if (typeof x === 'NaN' || typeof y === 'NaN') 

然而，typeof NaN == 'number'。你想isNaN(x)，或更隱晦，x != x

---

修復的是，它變得很明顯，你的問題是在其他地方。這條線：

var diff = new Vector(this.getCentre.x - x, this.getCentre.y - y); 

應該之一：

var diff = new Vector(this.getCentre().x - x, this.getCentre().y - y); 
var diff = this.getCentre().diff(new Vector(x, y)) 

有缺少括號的不少套。

Answer 2

或許您的代碼存在與您所顯示的不同的問題。也許它是無序的？我無法重現NaN，這裏是我用什麼：

HTML

<div>Vector</div> 
<div><span>X: </span><span id="x"></span><div> 
<div><span>Y: </span><span id="y"></span></div> 

JS

var Vector = function(x,y){ 
this.x = x; 
this.y = y; 
} 
var Collidable = function Collidable(x, y, d){ 
    this.pos = new Vector(x, y) || new Vector(50, 50); 
} 
var Player = function Player(){ 
    this.health = 100; 
} 
Player.prototype = new Collidable(50, 50, 70); 

var current = new Player(); 

console.log(current); 
console.log(current.pos); 

document.getElementById("x").innerHTML = current.pos.x; 
document.getElementById("y").innerHTML = current.pos.y; 

演示：http://jsfiddle.net/MuRNx/

Answer 3

這個問題似乎是Inheritance issues with nested objects之間的組合reason [not] to use the new keyword/shared properties from constructor inheritance。該解決方案將

function Player(){ 
    Collidable.call(this, 50, 50, 70); // give *this* instance an *own* Vector 
    this.health = 100; 
    this.facing = 0; 
    this.sprites = new Image(); 
    this.sprites.src = "./npc-oldman1.png"; 
    this.spriteNo = 0; 
    this.moveSpeed = 2; 
} 

Player.prototype = Object.create(Collidable.prototype); // without creating instance