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, Aug 14 '16 at 07: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, Aug 14 '16 at 07:24
You definitely lack setting the Car in the SportCar's prototype chain `SportCar.prototype = Object.create(Car);`. — Wiktor Zychla, Aug 14 '16 at 07:25
Why? I said I appreciate your link and it's useful. It helped, it was part of what I was looking for... — VSO, Aug 14 '16 at 07:26
@WiktorZychla Where? If I try to add it, I get "fordGt.describeSelf() is not a function" — VSO, Aug 14 '16 at 07:28
My bad, just do `SportCar.prototype = Object.create( Car.prototype )`. You want the SportCar to have the prototype in the chain rather than the function. — Wiktor Zychla, Aug 14 '16 at 07:40

score 1 · Accepted Answer · answered Aug 14 '16 at 07:43

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.

score 0 · Answer 2 · answered Mar 16 '20 at 10:59

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.

Not Understanding Javascript Inheritance

2 Answers2