In this post we will learn how to create class in javascript using ecmascript5.
Ecma Script is javascript standardisation so that it can be used consistently
in different browsers.
Ecma Script 5 was introduced in 2009 which does not include class keyword
for creating class. So we use Function constructor to create class in es5.
Most of old browsers still uses es5 so it is very necessary
we know every concepts of es5. So let's come straight to the post,
we use function constructor to create class in javascript in es5.
function Vehicle(gears, type) {
this.gears = gears;
this.type = type;
}
function TwoWheeler(gears, model) {
Vehicle.call(this, gears, "2-wheeler");
this.model = model;
}
TwoWheeler.Prototype.getDescription = function() {
return "Two wheeler " + model + " has " + gears;
}
function FourWheeler(gears, model, fuelType) {
Vehicle.call(this, gears, "4-wheeler")
this.model = model;
this.fuelType = fuelType;
}
function Sedan(airbags) {
this.airbags = airbags;
this.price = price;
}
For two wheeler we can use Two Wheeler class as in Two Wheeler class
we invoked base class constructor with gears and type as field names.
So when we doing this :-
var twoWheeler = new TwoWheeler(4, "hero honda");
Note: we have also used prototype function here.
Prototype is nothing like static function in higher level language.
It create single place memory to reside the code which is used
by all instances of that class.
Okay we are done with Two Wheeler where we did not use
inheritance we just initialise base class constructor with fields.
Note: Multiple inheritance is not possible in javascript.
We can only used single level / multilevel.
1st :- Sedan.prototype = Object.create(TwoWheeler.prototype);
2nd :- Sedan.prototype.constructor = Sedan;
What's the purpose of 1st statement ?
=> For that first thing you need to understand is when we
create an object it creates prototype chain which is similar
like inheritance and every things is Object in javascript so
parent is Object prototype and prototype of Object is null.
Like :- Integer prototype => Object prototype => null
In this case we should have :-
Sedan prototype => Four Wheeler prototype => Object Prototype => null
Now comes on the 1st statement :-
Sedan.prototype = Object.create(TwoWheeler.prototype);
Difference between Object.assign & Object.create is :-
Object.create preserves prototypal chain whereas
Object.assign always have prototype Object.
So if we used this statement :-
Sedan.prototype = Object.create(TwoWheeler.prototype);
We would have Sedan.prototype => Object prototype => null
So chain will be lost we don't have prototype method getDescription.
So that's why we used Object.create which preserves prototype chain.
Sedan prototype => Two Wheeler prototype => Vehicle prototype => Object prototype => null
Now comes on the 2nd statement :-
Sedan.prototype.constructor = Sedan;
When we do 1st statement it also copied constructor property
which is assigned to itself for every function constructor / class.
For ex :- function Test() {}
var test = new Test();
console.log(test.prototype.constructor)
It will print function constructor itself.
So when we do Sedan.prototype = Object.create(TwoWheeler.prototype);
It will copied TwoWheeler constructor property too.
If you do var sedan = new Sedan()
console.log(sedan.prototype.constructor)
It will return Two Wheeler constructor instead of Sedan.
Now this question you have in your mind Is there any use /
significance of 2nd statement ?
Well, not everytime but still we have in certain scenarios
where we require creating instances inside prototypes. Likewise :-
Suppose we have
function Base(name) {
this.name = name;
}
Base.prototype.getInstance = function() {
return new this.constructor(this.name)
}
function SubClass(name) {
Base.call(this, name)
}
SubClass.prototype = Object.create(Person.prototype)
var subClass = new SubClass("OM")
console.log(subClass.getInstance() instanceof SubClass)
Output: false
Why ?
Because prototype constructor points to Base class
that's why it initialise Base class instance instead of SubClass instance.
So that's why we use 2nd statement :-
Sedan.prototype = Object.create(TwoWheeler.prototype);
I hope you understood the concepts used to create es5 class clearly.
Now Let's combine all concepts and create class :-
function Vehicle(gears, type) {
this.gears = gears;
this.type = type;
}
function TwoWheeler(gears, model) {
Vehicle.call(this, gears, "2-wheeler");
this.model = model;
}
TwoWheeler.prototype.getDescription = function() {
return "Two wheeler " + model + " has " + gears;
}
function FourWheeler(gears, model, fuelType) {
Vehicle.call(this, gears, "4-wheeler")
this.model = model;
this.fuelType = fuelType;
}
function Sedan(airbags, gears, model, fuelType) {
FourWheeler.call(this, gears, model, fuelType);
this.airbags = airbags;
}
Sedan.prototype = Object.create(FourWheeler.prototype);
Sedan.prototype.constructor = Sedan;
Sedan.prototype.getDesc = function() {
return "The sedan "+ this.model + " has "+ this.airbags +
" is of "+ this.fuelType + " type."
}
var sedan = new Sedan(6, 4, "Verna", "Petrol")
console.log(sedan.getDesc())
Output:
'The sedan Verna has 6 is of Petrol type.'
var anotherSedan = new Sedan(8, 6, "Audi", "Petrol");
console.log(anotherSedan.getDesc())
Output:
'The sedan Audi has 8 is of Petrol type.'
That's it.
I hope you understood it clearly every concepts used here.
If you have any doubt please comment.
