js知识梳理4.继承的模式探究

写在前面

注：这个系列是本人对js知识的一些梳理，其中不少内容来自书籍:Javascript高级程序设计第三版和JavaScript权威指南第六版，感谢它们的作者和译者。有发现什么问题的，欢迎留言指出。

1.原型链

将原型链作为实现继承的方法，基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法：

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

原型链实现继承的问题：①问题来自包含引用类型值的原型，因为原来的实例属性变成现在的原型属性，会被共享，②在创建子类时，不能向超类型的构造函数中传递参数。

function SuperType() {
    this.colors = ["red","blue","green"];
}
function SubType() {}
//继承了SuperType
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//["red", "blue", "green", "black"]

var instance2 = new SubType();
console.log(instance2.colors);//["red", "blue", "green", "black"]

2.借用构造函数

即是在子类型构造函数的内部调用超类型构造函数（还可以传递参数）：

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
function SubType() {
    SuperType.call(this,'jaychou');
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//["red", "blue", "green", "black"]
console.log(instance1.name);//jaychou

var instance2 = new SubType();
console.log(instance2.colors);//["red", "blue", "green"]
console.log(instance2.name);//jaychou

借用构造函数的问题：方法都在构造函数中定义，没有进行函数复用。而且在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

3.组合继承

即使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性:

function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function () {
    console.log(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 () {
    console.log(this.age);
}

var instance1 = new SubType('jaychou',34);
instance1.colors.push("black");
console.log(instance1.colors);//["red", "blue", "green", "black"]
instance1.sayName();//jaychou
instance1.sayAge();//34

var instance2 = new SubType('xiaoming',15);
console.log(instance2.colors);//["red", "blue", "green"]
instance2.sayName();//xiaoming
instance2.sayAge();//15

4.原型式继承

没有使用严格意义上的构造函数，借助原型可以基于已有的对象创建新对象的特点。同时还不必因此创建自定义类型：

function inherit(p) {
    if(p==null) throw TypeError();
    if(Object.create) return Object.create(p);
    var t = typeof p;
    if(t !== "object" && t !== "funtion") throw TypeError();
    function f() {};
    f.prototype = p;
    return new f();
}

好处：简单直接方便，只是简单地想一个对象与另一个对象保持类似的情况下，原型式继承是很不错的做法。注意点：包含引用类型值的属性始终都会共享相应的值，就像使用原型模式一样，如：

var person = {
    name:'jaychou',
    friends:[1,2]
}
var anotherP = inherit(person);
anotherP.friends.push(3);
console.log(person.friends);//[1, 2, 3]
anotherP.name = "xiaoming";
console.log(anotherP.name);//xiaoming
console.log(person.name);//jaychou

所以从本质上讲，原型式继承就是对传过来的对象执行了一次浅复制。

5.寄生式继承

即创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后返回对象（接上）：

function createAnother(original) {
    var clone = inherit(original);
    clone.sayHi = function () {
        console.log("hi");
    }
    return clone;
}
var person = {
    name:'jaychou',
    friends:[1,2]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

在例子里给传进来的对象增加了方法sayHi，增强了对象。在主要考虑对象而不是自定义类型和构造函数的情况下，这个模式也不错。缺点：不能做到函数复用而降低效率了。

6.寄生组合式继承

组合继承的问题就是调用了两次超类型构造函数:一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。解决方案就是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型：

//寄生组合式继承
function inheritPrototype(subType, superType) {
    var prototype = inherit(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}
function SuperType(name) {
    this.name = name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}
function SubType(name,age) {
    //借用超类型的构造函数继承了超类型的实例属性
    SuperType.call(this,name);
    this.age = age;
}
//寄生式继承了超类型的原型方法
inheritPrototype(SubType,SuperType);

SubType.prototype.sayAge = function () {
    console.log(this.age);
}

var instance1 = new SubType("jaychou",34);
instance1.sayName();//jaychou
instance1.sayAge();//34

console.log(SuperType.prototype.isPrototypeOf(instance1));//true
console.log(instance1 instanceof SuperType);//true

好处：①只调用了一处SuperType构造函数，②避免了在SubType.prototype上面创建不必要的、多余的属性。综上，寄生组合式继承是继承的最理想方式。