首页 > 编程语言 > 详细

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

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

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.

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!