JavaScript中实现继承的几种方式

最近读到了《JavaScript高级程序设计》中的第六章，在继承的这一小节，了解到了在Javascript中实现继承的几种方式和优缺点，记录一下。

继承是指一个对象直接使用另一个对象的属性和方法

JacaScript原生不支持继承，Javascript将原型链作为实现继承的主要方式。那么，到底什么是原型链？简单回顾一下构造函数、原型和实例的关系。每个构造函数都有一个prototype指向原型对象，每个原型对象都有一个指针constructor指回构造函数，每一个实例都有一个指向原型对象的内部指针，在现代浏览器中就是__proto__。在使用原型链实现的继承中，实例的__proto__指向的不是一个原型而是另一个原型的实例，这个实例自己的__proto__不是指向自己的原型对象，而又是另外一个类的实例，那么这样层层递进，就构成了实例和原型的链条，这就是所谓的原型链的基本概念。

默认的原型

所有的引用类型都继承了Object，这个继承也是通过原型链实现的，所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针指向(__proto__)指向Object.prototype。这也是为什么所有的自定义类型都会继承tostring()、valueOf()等默认方法的原因了。

确定原型和实例的关系

instanceofisPrototypeOf()

谨慎的定义方法

为原型添加方法的代码一定要放在替换原型的语句之后。通过原型链实现继承的时候，不能使用对象字面量创建原型方法，因为这会重写原型链

原型链的问题

原型链继承会导致实例之间互相修改原型引用类型属性的值。在创建子类型的实例的时候，无法向超类型的构造函数传递参数 function SuperType(){ this.colors = ["red","blue","green"]; } function SubType(){} //继承了SuperType SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push("black"); var instance2 = new SubType(); console.log(instance2.colors);//red,blue,green,black

借用构造函数实现继承

先看下面的代码

function SuperType(){ this.name = name; } function SubType(){ //继承了SuperType,同时传递了参数 SuperType.call(this,"Xiaoxiao"); //实例属性 this.age = 22; } var instance = new SubType(); console.log(instance.name);//"Xiaoxiao" console.log(instance.age);//22

存在的问题

方法在构造函数中定义，因此函数复用就无从谈起在超类中定义的方法，对于子类型而言也是不可见的，所以所有的类型只能使用构造函数模式。

最常用的方法-组合继承

function SuperType(name){ this.name = name; this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function(){ alert(this.name); } function SubType(name,age){ //继承属性 //call在在这改变了函数上下文，函数作为构造函数使用时this指代创建的对象，相当于初始化了三个一个属性 SuperType.call(this,name); this.age = age; } //继承方法 SubType.prototype = new SuperType();//也会经常使用 SubType.prototype = Object.create(SuperType.prorotypr); SubType.constructor.prototype = SubType; SubType.prorotype.sayAge = function(){ alert(this.age); } var instance1 = new SubType("Xiaoxiao",21); instance1.colors.push("black"); var instance2 = new SubType("xx",22); console.log(instance2.colors);//red,blue,green

优点：组合继承避免了原型链和借用构造函数的缺陷，融合了他们的优点，是最常使用的方式。

原型式继承

ECMAScript5通过Object.create()方法实现了这一继承方式。第一个参数是父对象，第二个参数是扩展的属性。 当只传递一个参数时，Object.create()的行为和如下object方法类似：

function object(){ var args = arguments; var proto = args[0]; function F(){}; F.prototype = proto; return new F(); }

当有两个参数时，Object.create的polyfill如下

if(typeof Object.create != "function"){ Object.create = function(){ function F(); var hasOwn = Object.hasOwnProperty; return function(){ var args = arguments,proto = args[0]; if(typeof proto != "object") return; F.protoytpe = proto; var obj = new F(); F.prototype = null;//每次释放掉 if(args.length > 1){ var properties = Object(args[1]); for(var key in properties){ if(hasOwn.call(properties,key)){ obj[pro] = properties[key]; } } } return obj; } } }

浏览器支持：IE9+ FF4+ Safari5+ Opear12+ 和 Chrome

在没有必要兴师动众的创建构造函数，而只是想让一个对象和另一个对象保持类似的情况下，原型式继承是完全可以胜任的，但是，包含引用类型的值得属性使用都会共享响应的值，就像使用原型模式一样。

最有效的方法-组合寄生式继承

前面的组合继承是JavaScript里面最常用的继承模式，不过，他也有自己的不足。组合继承最大的问题就是无论什么情况下，都会调用两次超类构造函数。一次是在创建子类型原型的时候，另一次是在子类型狗仔函数内部。

function SuperType(name){ this.name = name; this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function(){ alert(this.name); } function SubType(name,age){ //在创造实例时会执行第二次调用，这时实例上有age,name,colors属性 SuperType.call(this,name); this.age = age; } //初始化SubType时会执行第一次调用，这时SubType原型上会有name和colors属性 SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }

所谓的组合寄生式继承，就是通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。

基本的模式如下

function inheritPrototype(subType,superType){ var prototype = Object(superType.prototypr); prototype.constructor = subType; subType.prototype = prototypr; }

避免了在SubType.prototype上创建不必要的，多余的属性。