传宗接代——继承

一、子类的原型对象——类式继承

　　把父类实例直接赋值给 prototype  属性，代码如下：

// 声明父类
function SuperClass() {
    this.superValue = true;
}
// 为父类添加共有方法
SuperClass.prototype.getSuperValue = function() {
    return this.superValue
}
// 声明子类
function SubClass() {
    this.subValue = false;
}

// 继承父类
SubClass.prototype = new SuperClass();
// 为子类添加共有方法
SubClass.prototype.getSubValue = function() {
    return this.subValue;
}

　　

　　类的原型对象的作用是为类的原型添加共有方法，但类不能直接访问这些属性和方法，必须通过原型prototype来访问。

　　实例化父类对象时，新创建的对象浅复制了父类的原型对象上的属性与方法，并且把原型_proto_指向父类的原型对象。通过原型链式访问到父类原型对象上的方法与属性。

var instance = new SubClass();
console.log(instance.getSuperValue()); // true
console.log(instance.getSubValue()); // false

　　

　　instanceof 可以通过判断对象的prototype链来检测某个对象是否是某个类的实例。

console.log(instance instanceof SuperClass); // true
console.log(instance instanceof SubClass); // true
console.log(SubClass instanceof SuperClass); // false

 

　　因为实现subClass继承superClass时是通过将superClass的实例赋值给subClass的原型prototype，所以说SubClass.prototype继承了superClass。

console.log(SubClass.prototype instanceof SuperClass) // true

 

　　这种继承方法有两个缺点：

其一：由于子类通过其原型prototype对父类进行实例化，继承了父类。则父类中的共有属性要是引用类型，就会在子类中被所有实例共用，所以一个子类的实例更改了子类原型从父类构造函数中继承来的共有属性，就会影响到其他子类。比如：

// 声明父类
function SuperClass() {
    this.books = ['css','html','javascript'];
    this.number = 3;
}
// 声明子类
function SubClass() {
    this.subValue = false;
}

// 继承父类
SubClass.prototype = new SuperClass();

var instance = new SubClass();
var instance2 = new SubClass();
console.log(instance.books,instance.number); // ["css", "html", "javascript"] 3
instance2.books.push('设计模式');
instance2.number = 4;
console.log(instance2.books, instance2.number) // ["css", "html", "javascript", "设计模式"] 4
console.log(instance.books,instance.number) // ["css", "html", "javascript", "设计模式"] 3

 

其二：由于子类实现的继承是靠其原型prototype对父类的实例化实现的，因此在创建父类的时候，是无法向父类传递参数的，因而在实例化父类的时候也无法对父类构造函数内的属性进行初始化。

二、构造函数继承

// 构造函数继承
// 声明父类 
function SuperClass(id) {
    // 引用类型共有属性
    this.books = ['JavaScript', 'html', 'css'];
    // 值类型共有属性
    this.id = id;
}

// 父类声明原型方法
SuperClass.propotype.showBooks = function() {
    console.log(this.books);
}

// 声明子类
function SubClass(id) {
    // 继承父类
    SuperClass.call(this, id);
}

// 创建第一个子类的实例
var instance1 = new SubClass(10);
// 创建第二个子类的实例
var instance2 = new SubClass(11);

instance1.books.push('设计模式');
console.log(instance1.books); // ['JavaScript', 'html', 'css', '设计模式']
console.log(instance1.id); // 10
console.log(instance2.books); // ['JavaScript', 'html', 'css']
console.log(instance2.id); // 11

instance1.showBooks(); // TypeError

解释：

（1）SuperClass.call(this,id)是构造函数式继承的精华，由于call可以更改函数的作用环境，在子类中对SuperClass调用这个方法就是将子类中的变量在父类中执行一遍。

（2）因为父类中是给this绑定属性的，所以子类自然也就继承了父类的公有属性。

（3）由于这种类型的继承没有涉及原型prototype，所以父类的原型方法自然不会被子类继承，如果想被子类继承就必须放在构造函数中，这样创造出来的每个实例都会单独拥有一份而不能共用，这样就违背了代码复用的原则。

三、组合继承

之前两种模式的特点：

（1）类式继承是通过子类的原型prototype对父类实例化来实现的

（2）构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数来实现的。

// 组合继承
// 声明父类
function SuperClass(name) {
    // 值类型共有属性
    this.name = name;
    this.books = ['html', 'css', 'JavaScript'];
}
// 父类原型共有方法
SuperClass.prototype.getName = function() {
    console.log(this.name);
}
// 声明子类
function SubClass(name, time) {
    // 构造函数式继承父类name属性
    SuperClass.call(this, name);
    // 子类中新增共有属性
    this.time = time;
}
// 类式继承 子类原型继承父类
SubClass.prototype = new SuperClass();
// 子类原型方法
SubClass.prototype.getTime = function() {
    console.log(this.time);
}

var instance1 = new SubClass('js book', 2015);
instance1.books.push('设计模式')
console.log(instance1.books); // ['html', 'css', 'JavaScript', '设计模式']
instance1.getName(); // js book
instance1.getTime(); // 2015

var instance2 = new SubClass('css book', 2016);
console.log(instance2.books); // ['html', 'css', 'JavaScript']
instance2.getName(); // css book
instance2.getTime(); // 2016

这种继承方式的缺点：父类构造函数调用了两次，一次是在使用造函数继承时执行了一遍父类的构造函数，而在实现子类原型的类式继承时又调用了一遍父类构造函数。

四、原型式继承

借助原型prototype可以根据已有的对象创建新的对象，同时不必创建新的自定义对象类型。

// 原型式继承
function inheritObject(o) {
    // 声明一个过渡函数对象
    function F() {}
    // 过渡对象的原型继承父对象
    F.prototype = o;
    // 返回过渡对象的一个实例，该实例的原型继承了父对象
    return new F();
}

var book = {
    name: 'js book',
    alikeBook: ["css book", "html book"];
};
var newBook = inheritObject(book);
newBook.name = 'ajax book';
newBook.alikeBook.push("xml book");

var otherBook = inheritObject(book);
otherBook.name = "flash book";
otherBook.alikeBook.push("as book");

console.log(newBook.name); // ajax book
console.log(newBook.alikeBook); // ["css book", "html book", "xml book", "as book"]
console.log(otherBook.name); // flash book
console.log(otherBook.alikeBook); // ["css book", "html book", "xml book", "as book"]
console.log(book.name); // js book
console.log(book.alikeBook); // ["css book", "html book", "xml book", "as book"]

解释：

（1）其实这是对类式继承的一个封装，其中的过渡对象就相当于类式继承中的子类，只不过在原型式中作为一个过渡对象出现，目的是为了创建要返回的新的实例化对象。

（2）类式继承出现的问题，原型式继承也会出现，引用类型会被共用。

（3）F过渡类的构造函数中无内容，所以开销比较小。

五、寄生式继承

寄生式继承就是对原型继承的第二次封装，并且在这第二次封装过程中对继承的对象进行了拓展，这样新创建的对象不仅仅有父类中的属性和方法，而且还添加新的属性和方法。

// 寄生式继承
// 声明基对象
var book = {
    name: 'js book',
    alikeBook: ["css book", "html book"]
};
function createBook(obj) {
    // 通过原型继承方式创建新对象
    var o = new inheritObject(obj);
    // 拓展新对象
    o.getName = function() {
        console.log(this.name);
    };
    // 返回拓展后的新对象
    return o;
}
var newBook = createBook(book);

console.log(newBook.name); // js book
newBook.getName(); // js book

六、寄生组合式继承

/** 
    * 寄生式继承 继承原型
    * 参数 subClass 子类
    * 参数 superClass 父类
*/
function inheritPrototype(subClass, superClass) {
    // 复制一份父类的原型副本保存在变量中
    var p = inheritObject(superClass.prototype);
    // 修正因为重写子类原型导致子类的constructor属性被修改
    p.constructor = subClass;
    // 设置子类原型
    subClass.prototype = p;
}
// 定义父类
function SuperClass(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
}
// 定义父类原型方法
SuperClass.prototype.getName = function() {
    console.log(this.name);
};
// 定义子类
function SubClass(name , time) {
    // 构造函数式继承
    SuperClass.call(this, name);
    this.time = time;
} 
// 寄生式继承父类原型
inheritPrototype(SubClass, SuperClass);
// 子类新增原型方法
SubClass.prototype.getTime = function() {
    console.log(this.time);
}
// 创建两个测试方法
var instance1 = new SubClass('js book', 2014);
var instance2 = new SubClass('css book', 2013);
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']
console.log(instance2.colors); // ['red', 'blue', 'green']
instance2.getName(); // css book
instance2.getTime(); // 2013

解释：

（1）在构造函数继承中我们已经调用了父类的构造函数，因此我们需要的就是父类的原型对象的一个副本。而这个副本我们通过原型继承便可得到，但是这么直接赋值给子类会有问题的，因为对父类原型对象得到的复制对象p中constructor属性不是subClass子类对象，因此在寄生式继承中要对复制的对象p做一次增强，修复其constructor属性指向不正确的问题，最后将得到的复制对象p赋值给子类的原型，这样子类的原型就继承了父类的原型并且没有执行父类的构造函数。

参考资料：《JavaScript设计模式》