javascript的继承模式的总结

js的继承方式可谓是五花八门啊，而且我用的频率也不高，因此很容易遗忘，很容易搞混。所以就来总结一下。

先来看一张图：

可以看到js的构造函数、原型、实例之间的关系。
接下来总结下js所有的继承方式：

原型链

function SuperType(){    this.property = true;}SuperType.prototype.getSuperValue = function(){    return this.property;};function SubType(){    this.subproperty = false;}//继承了 SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){    return this.subproperty;};var instance = new SubType();alert(instance.getSuperValue()); //true

这里的SubType通过prototype继承了SuperType,因此具有了父级也就是SuperType的getSuperValue方法和property属性。

当然，这个继承方法有很多的注意点，比如：
新加方法和重写方法：

//添加新方法SubType.prototype.getSubValue = function (){    return this.subproperty;};//重写超类型中的方法SubType.prototype.getSuperValue = function (){    return false;};

在通过原型链实现继承时，不能使用对象字面量创建原型方法。因为这
样做就会重写原型链，如下面的例子所示。

function SuperType(){    this.property = true;}SuperType.prototype.getSuperValue = function(){    return this.property;};function SubType(){    this.subproperty = false;}//继承了 SuperTypeSubType.prototype = new SuperType();//使用字面量添加新方法，会导致上一行代码无效SubType.prototype = {    getSubValue : function (){        return this.subproperty;    },    someOtherMethod : function (){        return false;    }};var instance = new SubType();alert(instance.getSuperValue()); //error!

借用构造函数

function SuperType(){    this.colors = ["red", "blue", "green"];}function SubType(){//继承了 SuperType    SuperType.call(this);}var instance1 = new SubType();instance1.colors.push("black");alert(instance1.colors); //"red,blue,green,black"var instance2 = new SubType();alert(instance2.colors); //"red,blue,green"

这边，SubType通过call“借调”了SuperType的构造函数。实际上是在（未来将要）新创建的 SubType 实例的环境下调用了 SuperType 构造函数。从而实现继承。

注意点：
相对于原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函
数传递参数。

function SuperType(name){    this.name = name;}function SubType(){    //继承了 SuperType，同时还传递了参数    SuperType.call(this, "Nicholas");    //实例属性    this.age = 29;}var instance = new SubType();alert(instance.name); //"Nicholas";alert(instance.age); //29

如果仅仅是借用构造函数，那么也将无法避免构造函数模式存在的问题——方法都在构造函数中定
义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的，结
果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

组合继承

组合继承指的是将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。

function SuperType(name){    this.name = name;    this.colors = ["red", "blue", "green"];}SuperType.prototype.sayName = function(){    alert(this.name);};function SubType(name, age){    //继承属性    SuperType.call(this, name);    this.age = age;}//继承方法SubType.prototype = new SuperType();SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function(){    alert(this.age);};var instance1 = new SubType("Nicholas", 29);instance1.colors.push("black");alert(instance1.colors); //"red,blue,green,black"instance1.sayName(); //"Nicholas";instance1.sayAge(); //29var instance2 = new SubType("Greg", 27);alert(instance2.colors); //"red,blue,green"instance2.sayName(); //"Greg";instance2.sayAge(); //27

这是JavaScript 中最常用的继承模式。

原型式继承

function object(o){    function F(){}    F.prototype = o;    return new F();}

从本质上讲， object()对传入其中的对象执行了一次浅复制。

var person = {    name: "Nicholas",    friends: ["Shelby", "Court", "Van"]};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push("Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"

在传入一个参数的情况下，Object.create()与 object()方法的行为相同。

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相
同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属
性。例如：

var person = {    name: "Nicholas",    friends: ["Shelby", "Court", "Van"]};var anotherPerson = Object.create(person, {    name: {        value: "Greg"    }});alert(anotherPerson.name); //"Greg"

寄生式继承

function createAnother(original){    var clone = object(original); //通过调用函数创建一个新对象    clone.sayHi = function(){ //以某种方式来增强这个对象        alert("hi");    };    return clone; //返回这个对象}var person = {    name: "Nicholas",    friends: ["Shelby", "Court", "Van"]};var anotherPerson = createAnother(person);anotherPerson.sayHi(); //"hi"

寄生组合式继承

function SuperType(name){    this.name = name;    this.colors = ["red", "blue", "green"];}SuperType.prototype.sayName = function(){    alert(this.name);};function SubType(name, age){    SuperType.call(this, name); //第二次调用 SuperType()    this.age = age;}SubType.prototype = new SuperType(); //第一次调用 SuperType()SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function(){    alert(this.age);};

class extend

es6里为了统一继承的方式（到底是为了统一还是混乱？？），像传统面向对象语言看齐，封装出了class 和extend这两个关键词。

class Point {  constructor(x, y) {    this.x = x;    this.y = y;  }}class ColorPoint extends Point {  constructor(x, y, color) {    this.color = color; // ReferenceError    super(x, y);    this.color = color; // 正确  }}

看起来貌似还挺方便的，好像跟Java的继承还有点像。不过实际上差别还是很大的。可以看看阮一峰老师ECMAScript 6 入门-class。