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.

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

时间: 2024-10-11 01:22:10

What is the difference between the ways to implement inheritance in javascript.的相关文章

What is the difference between a function expression vs declaration in JavaScript?

  This question already has an answer here: var functionName = function() {} vs function functionName() {} 20 answers What is the difference between the following lines of code? //Function declaration function foo() { return 5; } //Anonymous function

3 ways to define a JavaScript class

3 ways to define a JavaScript class September 29th, 2006. Tagged: JavaScript Introduction JavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object.

springmvc4开发rest

Spring MVC 4 RESTFul Web Services CRUD Example+RestTemplate Created on: August 11, 2015 | Last updated on: March 12, 2017 websystiqueadmin In this post we will write a CRUD Restful WebService using Spring MVC 4, and write a REST client with RestTempl

原型模式Prototype

原型模式 http://www.cnblogs.com/zhili/p/PrototypePattern.html ICloneable接口 https://msdn.microsoft.com/en-us/library/system.icloneable(v=vs.110).aspx Supports cloning, which creates a new instance of a class with the same value as an existing instance. Re

基于 .NET 的开源AOP框架评估

Rating of Open Source AOPFrameworks in .NET 基于 .NET 的开源AOP框架评估 Introduction 引言 In the days where business agility is becoming the definite needof any business / IT infrastructure, quite frequentlywe are ending up with facing scenarios where we need t

【转】10个关于java单例模式的面试问题

10 interview question on Singleton Pattern in Java Question starts with What is Singleton class? Have you used Singleton before? Singleton is a class which has only one instance in whole application and provides a getInstance() method to access the s

可扩展的Web系统和分布式系统(Scalable Web Architecture and Distributed Systems)

Open source software has become a fundamental building block for some of the biggest websites. And as those websites have grown, best practices and guiding principles around their architectures have emerged. This chapter seeks to cover some of the ke

The top 100 papers Nature explores the most-cited research of all time.

The top 100 papers Nature explores the most-cited research of all time. The discovery of high-temperature superconductors, the determination of DNA’s double-helix structure, the first observations that the expansion of the Universe is accelerating —

Programmer Competency Matrix

Note that the knowledge for each level is cumulative; being atlevel n implies that you also know everything from thelevels lower than n. Computer Science   2n (Level 0) n2 (Level 1) n (Level 2) log(n) (Level 3) Comments data structures        Doesn’t