2016-08-12 117 views
0

我試圖爲我的項目進行一個非常簡單的繼承模式,從基類擴展到專門的類。但是,我的專門類的屬性被父類的屬性覆蓋。具有屬性的JS對象繼承

這是爲什麼,我該如何解決它?

感謝,

function Ship(className, x, y){ 
    this.className = className; 
    this.x = x; 
    this.y = y; 
    this.speed = 0; 
} 

function Corvette(className, x, y){ 
    this.className = className; 
    this.x = x; 
    this.y = y;  
    this.speed = 100;   
    Ship.call(this, className, x, y) 
} 


Corvette.prototype = Object.create(Ship.prototype); 

var ship = new Ship("Biggie", 50, 50); 
var corvette = new Corvette("Smallish", 50, 50); 

console.log(Corvette.className) // "Smallish" - correct via parameter. 
console.log(Corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute 
console.log(Corvette.constructor.name) // Ship 
+0

保存你自己就是舊的「class」系統的頭痛,並使用[ES6 classes。](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) –

+0

屬性查找通常發生在第一級反對prot (這個,className,x,y)'這個調用將用'0'代替速度的值。 –

回答

0

你只需要在克爾維特功能開始移動Ship.call(this, className, x, y)

而且,接下來的時間,發佈代碼之前,檢查它是正確的,你寫console.log(Corvette),而不是console.log(corvette)

另一件事:你不需要重複PARAMS你不希望覆蓋

function Ship(className, x, y){ 
 
    this.className = className; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.speed = 0; 
 
} 
 

 
function Corvette(className, x, y){ 
 
    Ship.call(this, className, x, y) 
 
    this.speed = 100;   
 
} 
 

 

 
Corvette.prototype = Object.create(Ship.prototype); 
 

 
var ship = new Ship("Biggie", 50, 50); 
 
var corvette = new Corvette("Smallish", 50, 50); 
 

 
console.log(corvette.className) 
 
console.log(corvette.speed) 
 
console.log(corvette.constructor.name)

1

爲什麼你在child對象相同的性​​能,這是已經在parent's

我建議你做

function Ship(className, x, y, speed = 0) { 
 
    this.className = className; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.speed = speed; 
 
} 
 

 
function Corvette(className, x, y, speed = 100) { 
 
    Ship.call(this, className, x, y, speed); 
 
} 
 

 
Corvette.prototype = Object.create(Ship.prototype); 
 
Corvette.prototype.constructor = Corvette; 
 

 
var ship = new Ship("Biggie", 50, 50); 
 
var corvette = new Corvette("Smallish", 50, 50); 
 

 
console.log(corvette.className) // "Smallish" - correct via parameter. 
 
console.log(corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute 
 
console.log(corvette.constructor.name) // Ship

,如果您的瀏覽器支持的ES6使用此功能ES6 classes一些功能。

class Ship { // And also Ship is an abstractionm so you can use `abstract` keyword with it 
 
    constructor(className, x, y, speed = 0) { 
 
    this.className = className; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.speed = speed; 
 
    } 
 
} 
 

 
class Corvette extends Ship { 
 
    constructor(className, x, y, speed = 100) { 
 
     super(className, x, y, speed); 
 
    } 
 
} 
 

 
var ship = new Ship("Biggie", 50, 50); 
 
var corvette = new Corvette("Smallish", 50, 50); 
 

 
console.log(corvette.className) // "Smallish" - correct via parameter. 
 
console.log(corvette.speed) // should be 100, is 0 - not correct, "static" from parent attribute 
 
console.log(corvette.constructor.name) // Ship

+0

這樣'Corvette.speed'是0,不是100,如同op詢問;) – rpadovani

+1

@rpadovani編輯 –

0

你應該先調用父類構造器,然後覆蓋特性,這樣通過克爾維特設置的屬性不會被父類,即改變:

function Corvette(className, x, y){ 
    Ship.call(this, className, x, y)  
    this.speed = 100;   

}