Not Understanding Javascript Inheritance

Question

I am learning javascript inheritance. I found a good explanation here: JavaScript Inheritance

function A() {
    B.call(this);
}

function B() {
    C.call(this);
    this.bbb = function() {
        console.log("i was inherited from b!");
    }
}

I am trying to implement inheritance based on the above and other solutions (there are a bunch of them online and they all seem to suggest different things). Anyway, I am trying to get SportsCar to inherit from Car and use Car's describeSelf method. I am not sure what I am doing wrong. PLUNK for convenience

var Car = function(make, topSpeed, color){
    this.make = make;
    this.topSpeed = topSpeed;
    this.color = color;
}

Car.prototype.describeSelf = function(){
    document.write('Hi, I am a: ' + this.make + ', my top speed is ' + this.topSpeed + ' and I am ' + this.color);
}

var corolla = new Car('toyota', 120, 'blue');

corolla.describeSelf();

//Code works fine up to here
var SportsCar = function(engineSize, make, topSpeed, color) {
    Car.call(this, make, topSpeed, color); 
    this.engineSize = engineSize;
};

var fordGt = new SportsCar('V8', 'ford', 205 , 'red');

fordGt.describeSelf();

I REALLY don't understand what call does.

Edit: Looks like I wasn't very clear in what I am asking. The essence of the question is make this line work: fordGt.describeSelf(); and get an explanation as to what I am currently doing wrong.

@JaromandaX I appreciate the link, but that didn't help me understand how to add new properties to the child object's constructor. The examples on MDN do not pass new props. — VSO
– VSO, Commented Aug 14, 2016 at 7:20
My question is how to make inheritance work properly. E.g. how to make this line work: fordGt.describeSelf(); I will update the question. — VSO
– VSO, Commented Aug 14, 2016 at 7:24
You definitely lack setting the Car in the SportCar's prototype chain SportCar.prototype = Object.create(Car);. — Wiktor Zychla
– Wiktor Zychla, Commented Aug 14, 2016 at 7:25
Why? I said I appreciate your link and it's useful. It helped, it was part of what I was looking for... — VSO
– VSO, Commented Aug 14, 2016 at 7:26
@WiktorZychla Where? If I try to add it, I get "fordGt.describeSelf() is not a function" — VSO
– VSO, Commented Aug 14, 2016 at 7:28

Wiktor Zychla · Accepted Answer · 2016-08-14 07:43:46Z

1

Add the line commented with add this.

var Car = function(make, topSpeed, color){
  this.make = make;
  this.topSpeed = topSpeed;
  this.color = color; 
}

Car.prototype.describeSelf = function(){
  document.write('Hi, I am a: ' + this.make + ', my top speed is ' +      this.topSpeed + ' and I am ' + this.color);
}

var corolla = new Car('toyota', 120, 'blue');

corolla.describeSelf();

//Code works fine up to here
var SportsCar = function(engineSize, make, topSpeed, color) {
  Car.call(this, make, topSpeed, color); 
  this.engineSize = engineSize;
};

// add this
SportsCar.prototype = Object.create( Car.prototype );

var fordGt = new SportsCar('V8', 'ford', 205 , 'red');

fordGt.describeSelf();

This is because you really want the prototype chain to be set up correctly so that the newly created object has its parent prototype in the chain.

If you, on the other hand, attach the method to the object itself

var Car = function(make, topSpeed, color){
  this.make = make;
  this.topSpeed = topSpeed;
  this.color = color; 
  this.describeSelf = function() ...
}

the chain could be ignored (because you already call the constructor from the other constructor, however you'd end up with multiple instances of the same function attached to newly created instances.

answered Aug 14, 2016 at 7:43

Wiktor Zychla

48.5k6 gold badges83 silver badges114 bronze badges

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

1 Comment

VSO Over a year ago

Thanks, that helps a lot.

user11121466 · Accepted Answer · 2020-03-16 10:59:04Z

0

You just could continue like that

  this.make = make;
  this.topSpeed = topSpeed;
  this.color = color;

  this.engineSize = engineSize;

, instead of using the call method. But maybe there sometimes be many arguments and you dont repeat yourself. What call method is doing is that:

It running the code what's inside of Car constructor, as if the code was written in the sportCar constructor. And that's being done via 'this' argument in .call() method.

In ES6 way of doing inheritance though, same thing is done by super() method, which is obligatory.

answered Mar 16, 2020 at 10:59

user11121466

Collectives™ on Stack Overflow

Not Understanding Javascript Inheritance

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related