27·6
2016
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)
- bicycle (class)
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