Where's my inheritance?

I like working with data. As a graphic designer structured information is like M&Ms to a three year old. Sort all the colours! The lesson I just completed dealt with objects, classes and prototypes and explained inheritance. Being familiar with CSS inheritance and classes were ringing a solid brass bell. Basic inheritance looks something like this:

  • vehicle (class)
    • steering
    • seating capacity
    • manually powered
      • bicycle (class)
        • steering (inherited from vehicle)
        • seating capacity (inherited from vehicle)
      • motorised (class)
      • engine
      • power
      • motorbike (class)
        • steering (inherited from vehicle)
        • seating capacity (inherited from vehicle)
        • engine (inherited from motorised)
        • power (inherited from motorised)
      • car (class)
        • engine (inherited from vehicle)
        • steering (inherited from vehicle)
        • seating capacity (inherited from motorised)
        • power (inherited from motorised)

This type of inheritance happens between Javascript objects and classes, exactly like the do in the above tree. Here's a simple example of the above, in Javascript making use of object and prototype:

// Create the Vehicle class
function Vehicle(name,steering,seating) {
    this.name = name;
    this.steering = steering;
    this.seating = seating;
    this.color = "red";
}
// Create the Motorised class
function Motorised(name,engine,power) {
    this.name = name;
    this.engine = engine;
    this.power = power;
    this.fuel = "premium";
}
// Create the Car class
function Car(name) {
    this.name = name;
}
// This does not mean that function Car(name) looks like the below, as it appears to only inherit properties with actual values, not undefined/empty properties. The console.log demonstrates this pretty well.
//  function Car(name) {
//      this.name = name;
//      this.steering = steering;
//      this.seating = seating;
//      this.color = "red"; 
//      this.engine = engine;
//      this.power = power;
//      this.fuel = "premium";
//  }

// setup the prototype chain
Motorised.prototype = new Vehicle();
Car.prototype = new Motorised();

// create the various objects
var Ferrari = new Car("Ferrari","V8","512HP"); // "V8" and "512HP" are not saved since the Car object constructor only accept the "name" parameter
var Lambo_1 = new Motorised("Lamborghini","V16","600HP");
var Lambo_2 = new Car("Lamborghini","V16","600HP"); // "V16" and "600HP" are not saved since the Car object constructor only accept the "name" parameter

// output our controls
console.log("--- FERRARI ---");
console.log(Ferrari.name);      // value from new Car object.
console.log(Ferrari.engine);    // no inheritance
console.log(Ferrari.power);     // no inheritance
console.log(Ferrari.color);     // value from Vehicle object class.
console.log("--- LAMBO 1 ---");
console.log(Lambo_1.name);      // value from new Motorised object.
console.log(Lambo_1.engine);    // value from new Motorised object.
console.log(Lambo_1.power);     // value from new Motorised object.
console.log(Lambo_1.fuel);      // value from Motorised object class.
console.log(Lambo_1.color);     // value from Vehicle object class.
console.log("--- LAMBO 2 ---");
console.log(Lambo_2.name);      // value from new Car object.
console.log(Lambo_2.engine);    // no inheritance
console.log(Lambo_2.power);     // no inheritance
console.log(Lambo_1.fuel);      // value from Motorised object class.
console.log(Lambo_1.color);     // value from Vehicle object class.

Here's our output

--> --- FERRARI ---
--> Ferrari
--> undefined
--> undefined
--> red
--> --- LAMBO 1 ---
--> Lamborghini
--> V16
--> 600HP
--> premium
--> red
--> --- LAMBO 2 ---
--> Lamborghini
--> undefined
--> undefined
--> premium
--> red