What is the difference between the ways to implement inheritance in javascript.
2014-06-16 15:38
519 查看
see also :
http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp http://davidshariff.com/blog/javascript-inheritance-patterns/
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
Person.prototype.getFullName = function(){
return this.fname+” “+this.lname;
}
SubClass
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.
instead you have to assign fname and lname explicitly.
Pros
1. employee instanceof Employee === employee instanceof Person === true
Object Masquerading Approach
Base Class
Person.prototype.getFullName = function(){
return this.fname+” “+this.lname;
}
SubClass
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.
After subclassing Person, you need to copy all the methods from Person’s prototype to Employee’s prototype.
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.
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 AgarwalOften 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 a function expression vs declaration in JavaScript?
- What is the difference between << and += while injecting elements to Hash.new([])?
- what is the difference between definition and declaration in c
- What is the difference between a soft reference and a weak reference in Java?
- What is the difference between SET and SELECT when assigning values to variables, in T-SQL?
- what is the difference of select single and select up to one row in abap
- What is the Difference Between Type and Class in
- what is the difference between definition and declaration in c
- What is the difference between @staticmethod and @classmethod in Python?
- What is the Execution Context & Stack in JavaScript? -- To understand scope chain
- In PHP5, what is the difference between using self and $this? When is each appropriate?
- What is the difference between Views and Materialized Views in Oracle?
- What is the difference between provider network and self-service network in OpenStack?
- what is the difference between json and javascript object.
- What exactly is the difference between “pass by reference” in C and in C++?
- What is the difference between LINQ to SQL and LINQ to Entities?
- OpenStack: What is the difference between Block storage and Object storage?Also, In what way they ar
- Whats is the difference between train, validation and test set, in neural networks?
- What is the difference between SVD and matrix factorization in context of recommendation engine?
- whats is the difference between train, validation and test set, in neural networks?