js基础进阶2-3 面向对象（继承）

继承是面向对象编程中必不可少的部分，前面说过js中没有明确定义类，自然也没有明确定义继承的方式，js中的继承是通过模仿实现的，js中的继承我理解为对象属性和方法的拷贝。
本篇博客参考自w3cschool。

继承的几种方式

对象冒充

之前说到了js中的继承可以理解为对象属性/方法的拷贝，当然我们无需使用对象的深拷贝方法，使用Function中的call/apply的方法可以很方便的实现。这2种方法基本相同，唯一的区别就是传入的参数略有区别。它们可以改变函数运行时的上下文this，从而达到继承的效果，而且可以很轻易的实现多继承。

call

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");

上面的代码sayColor中，本没有this.color属性，但是通过sayColor.call通过第一个参数传入obj，改变了sayColor的运行时的上下文this，于是它便输出了obj中的color属性。接下来看继承的实现：

function ClassA(sColor) {
    this.color = sColor;
    this.sayColor = function () {
        alert(this.color);
    };
}

function ClassB(sColor, sName) { 

    ClassA.call(this, sColor);//调用ClassA函数执行并传入当前ClassB的上下文this作为ClassA的上下文，实现继承

    //ClassC.call(this, sColor);//如果需要再继承ClassC，可再次使用call方法即可，方便地实现多继承

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //输出 "blue"
objB.sayColor();    //输出 "red"  继承了ClassA的color属性及sayColor方法
objB.sayName();     //输出 "John"

apply

此方法与call的唯一区别在于，apply的第二参数为参数数组。需要注意的是参数数组的顺序必须与调用的函数的参数顺序保持一致，如下例的arguments的顺序需要与ClassA的参数顺序保持一致。

function ClassB(sColor, sName) {

    ClassA.apply(this, arguments);

    this.name = sName;
    this.sayName = function () {
        alert(this.name);
    };
}

原型链

在 js基础进阶2-2 面向对象（类与对象的创建与使用）这篇博客中，曾介绍过使用原型方式创建类。

prototype 对象是个模板，要实例化的对象都以这个模板为基础。总而言之，prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制。

之前介绍prototype返回的是一个实例，那么将一个类的prototype指向另一个类的实例，这个类就拥有了它类的所有属性及方法。

值得注意的是，原型链中的属性及方法是逐级向上进行查找的，如果子类没有该属性则会一直向上查找。

function ClassA() {
}

ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB() {
}

ClassB.prototype = new ClassA();//**不应给构造函数指定参数，这在原型链中是标准做法。**


var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

由于使用的是原型链，objB 既是ClassA的实例，也是ClassB的实例：

var objB = new ClassB();
alert(objB instanceof ClassA);  //输出 "true"
alert(objB instanceof ClassB);  //输出 "true"

原型继承的弊端：

无法实现多继承，prototype只能有一个指向。

混合方式（对象冒充&原型链）

这种继承方式使用构造函数定义类，并非使用任何原型。对象冒充的主要问题是必须使用构造函数方式，这不是最好的选择。不过如果使用原型链，就无法使用带参数的构造函数了。开发者如何选择呢？答案很简单，两者都用。
在前一章，我们曾经讲解过创建类的最好方式是用构造函数定义属性，用原型定义方法。这种方式同样适用于继承机制，用对象冒充继承构造函数的属性，用原型链继承 prototype 对象的方法。结合上述2种方式产生了以下的混合方式：

function ClassA(sColor) {
    this.color = sColor;
}

ClassA.prototype.sayColor = function () {
    alert(this.color);
};

function ClassB(sColor, sName) {
    ClassA.call(this, sColor);//使用带参数的构造函数,用对象冒充继承ClassA的属性
    this.name = sName;
}

ClassB.prototype = new ClassA();//用原型链继承 ClassA 类的方法

ClassB.prototype.sayName = function () {
    alert(this.name);
};


var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor();    //输出 "blue"
objB.sayColor();    //输出 "red"
objB.sayName(); //输出 "John"

以上代码可以看出，使用构造函数定义类，构造函数中定义属性，原型链定义方法，然后使用call进行继承（可多继承）继承属性，原型链继承方法。之前也讲过，原型只会被创建一次，继承的子类中的方法直接调用原型链上的方法，不会被再次创建。 目前来看，这是最全面的继承方式。