码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2014-06-18 16:43:34      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

see also :

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

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

 

Object masquerading with Javascript

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.

What is the difference between the ways to implement inheritance in javascript.,布布扣,bubuko.com

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

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/malaikuangren/p/3791082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!