JS object inheritance with attributes

Question

Im trying to get a very simple inheritance pattern for my Project going, extending from a base class into a specialized class. However, my specialized class's attributes are being overwritten by the parent's attributes.

Why is that and how can i fix it ?

thanks,

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

Save yourself the headache of the old "class" system and use ES6 classes. — JD Angerhofer
– JD Angerhofer, Commented Aug 12, 2016 at 10:02
property lookup normally happens from first level object to prototypes.. Ship.call(this, className, x, y) This call will replace the speed's value with 0 — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Aug 12, 2016 at 10:03

Suren Srapyan · Accepted Answer · 2016-08-12 10:10:45Z

1

Why you have the same properties in the child object which are already in the parent's?

I suggest you to do

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

and if your browser supports some features of ES6 use this feature 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

edited Aug 12, 2016 at 10:10

answered Aug 12, 2016 at 10:02

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rpadovani Over a year ago

In this way Corvette.speed is 0, not 100 as op asked ;)

rpadovani · Accepted Answer · 2016-08-12 10:02:11Z

You only need to move Ship.call(this, className, x, y) at the start of Corvette function.

Also, next time, before posting code, check it is correct, you wrote console.log(Corvette) instead of console.log(corvette)

Another thing: you do not need to repeat params you do not want to overwrite

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)

Dhananjay · Accepted Answer · 2016-08-12 10:08:27Z

0

You should invoke the parentclass contructor first and then override the properties, this way the properties set by Corvette will not be changed by the parent class i.e.:

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

}

answered Aug 12, 2016 at 10:08

Dhananjay

5543 silver badges7 bronze badges

Collectives™ on Stack Overflow

JS object inheritance with attributes

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related