속성이있는 JS 객체 상속

Question

내 프로젝트를위한 매우 간단한 상속 패턴을 얻으려는 중이며 기본 클래스에서 특수 클래스로 확장하려고합니다. 그러나 내 특수 클래스의 특성은 부모 특성에 의해 덮어 쓰여지고 있습니다.

왜 그런가요? 어떻게 고칠 수 있습니까?

덕분에,

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 

Answer 1

만 코르벳 함수의 시작 부분에 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)

Answer 2

당신은 parent's 이미있는 child 객체의 동일한 속성을 가지고 왜 ?

나는 브라우저가 ES6이 기능을 사용 ES6 classes의 일부 기능을 지원하는 경우

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

을하고하는 것이 좋습니다.

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

Answer 3

은 먼저에 ParentClass의 생성자를 호출 한 다음 속성을 오버라이드 (override), 코르벳에 의해 설정된 속성은 부모 클래스의 예에 의해 변경되지 않습니다이 방법 :

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

}