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

为什么child对象中已存在parent's中的相同属性？

我建议你这样做

＆＃13;

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

＆＃13;

如果您的浏览器支持ES6的某些功能，请使用此功能 ES6 classes 。

＆＃13;

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

＆＃13;

Answer 2

您只需在Corvette功能开始时移动Ship.call(this, className, x, y)。

另外，下次在发布代码之前，检查一下是否正确，您写的是console.log(Corvette)而不是console.log(corvette)

另一件事：你不需要重复你不想覆盖的参数

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 3

您应首先调用父类构造函数然后覆盖属性，这样父类不会更改由Corvette设置的属性，即：。

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

}

带有属性的JS对象继承

3 个答案: