What is the difference between the ways to implement inheritance in javascript.

see also :

http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp

http://davidshariff.com/blog/javascript-inheritance-patterns/

Object masquerading with Javascript

Posted on October 7, 2010 by Amit Agarwal

Often people follow this common approach to make their Javascript programs object oriented. Let me explain one more approach for creating subclasses.

Prototype Approach (Common)

Base Class

function Person(fname, lname){
this.fname = fname;
this.lname = lname;
}

Person.prototype.getFullName = function(){
return this.fname+” “+this.lname;
}

SubClass

function Employee(jobType){
this.jobType = jobType;
}

Employee.prototype = new Person();

Employee.prototype.getNameAndJobType = function(){
return this.fname+” “+this.lname+” “+this.jobType;
}
Cons
1. Every subclass of Person creates an instance of Person to assign to it’s prototype. Its an unnecessary overhead.
2. constructor of Employee’s instance is returned as Person. Weird!
3. Properties inherited from Person has to be assigned explicitly. You can’t create Employee instances like this. var employee = new Employee('Alice', 'Bob', 'Engineer');

instead you have to assign fname and lname explicitly.  var employee = new Employee('Engineer');
employee.fname = 'Alice';
employee.lname = 'Bob';


Pros
1. employee instanceof Employee ===  employee instanceof Person === true

Object Masquerading Approach

Base Class

function Person(fname, lname){
this.fname = fname;
this.lname = lname;
}

Person.prototype.getFullName = function(){
return this.fname+” “+this.lname;
}

SubClass

function Employee(fname, lname, jobType){
this.jobType = jobType;
Person.call(this, fname, lname);
}

Employee.prototype.getNameAndJobType = function(){
return this.fname+” “+this.lname+” “+this.jobType;
}

Pros
1. You don’t need to create Person instance for every subclass of Person
2. constructor of Employee’s instance is returned as Employee. Bingo!
3. You can directly make Employee instance by [var employee = new Employee('Alice', 'Bob', 'Engineer')]

Cons
1.  employee instanceof Employee === true BUT employee instanceof Person === false
2. In this approach an employee instance doesn’t has access to Person’s method if the method is defined in prototype instead of inside constructor definition.    var employee = new Employee('Alice', 'Bob', 'Engineer');
employee.getFullName(); //Doesn't work

After subclassing Person, you need to copy all the methods from Person’s prototype to Employee’s prototype.    function copyPrototype(from, to){
var fromPrototype = from.prototype;
var toPrototype = to.prototype;
for(o in fromPrototype){
if(fromPrototype.hasOwnProperty(o)){
toPrototype[o] = fromPrototype[o];
}
}
}

copyPrototype(Person, Employee);

Note: Employee instance would have access to Person’s method if it was defined inside function instead or prototype. But still, you should always define methods in prototype instead of constructor. Defining methods inside Constructor makes instances heavy.