7、面向对象的程序设计3（《JS高级》笔记）

作者: yjaal | 来源:发表于2017-03-20 22:20 被阅读57次

三、继承

许多OO语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际方法。由于函数没有签名，在ECMAScript中无法实现接口继承，只支持实现继承，而且其实现继承主要是依靠原型链来实现的。

3.1 原型链（很少单独使用）

原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。如果我们让原型对象等于另一个类型的实例，那么就实现了继承。下面通过例子说明：

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());   //true

说明：继承的图解如下：

1
如图所示，这里让SubType原型指向一个SuperType实例实现继承，本质上是重写了原型对象，代之以一个新类型的实例。要注意instance.constructor现在指向的是SuperType，这是因为原来SubType中的constructor被重写的缘故（实际上，不是SubType的原型的constructor属性被重写了，而是SubType的原型指向了另一个对象——SuperType的原型，而这个原型对象的constructor属性指向的是SuperType）。在调用方法或属性时和前面讲的一样，一层层的搜索，直到最后。

3.1.1 别忘记默认的原型

起始所有引用类型默认都继承了Object，而这个继承也是通过原型链实现的，如下所示：

3.1.2 确定原型和实例的关系

可以通过两种方式来确定原型和实例之间的关系。第一种是使用instanceof操作符，只要用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true：

 alert(instance instanceof Object);      //true
 alert(instance instanceof SuperType);   //true
 alert(instance instanceof SubType);     //true

第二种方式是使用isPrototypeOf()方法，只要是原型链中出现过的原型，都可以说是该原型链所派生的实例的原型，因此此方法会返回true：

 alert(Object.prototype.isPrototypeOf(instance));    //true
 alert(SuperType.prototype.isPrototypeOf(instance)); //true
 alert(SubType.prototype.isPrototypeOf(instance));   //true

3.1.3 谨慎地定义方法

子类型有时候需要重写超类型中的某个方法，或者添加超类型中不存在的某个方法。但不管这样，给原型链添加方法的代码一定要放在替换原型的语句之后，也就是原型链形成之后：

 function SuperType(){
     this.property = true;
 }
 
 SuperType.prototype.getSuperValue = function(){
     return this.property;
 };
 
 function SubType(){
     this.subproperty = false;
 }
 
 //继承
 SubType.prototype = new SuperType();
 
 //添加新方法
 SubType.prototype.getSubValue = function (){
     return this.subproperty;
 };
 
 //重写方法
 SubType.prototype.getSuperValue = function (){
     return false;
 };
 
 var instance = new SubType();
 alert(instance.getSuperValue());   //false

说明：起始很容易理解，因为我们在让子类型的原型指向超类型的实例的时候，本质上来说是重写了子类型的原型对象，既然原型对象都重写了，当然在它之前添加的方法或重写的方法都是无效的。同样的，如果已经将子类型的原型指向超类型，那么在后面的代码中如果又使用字面量添加新方法，则同样会让之前的原型链遭到破坏：

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
function SubType(){
    this.subproperty = false;
}

//inherit from SuperType
SubType.prototype = new SuperType();

//使用字面量添加新方法，会导致上一行代码无效
SubType.prototype = {
    getSubValue : function (){
        return this.subproperty;
    },
    someOtherMethod : function (){
        return false;
    }
};

var instance = new SubType();
alert(instance.getSuperValue());   //error!

3.1.4 原型链的问题

原型链最主要的问题来自包含引用类型的原型。通过例子说明：

function SuperType(){
    this.colors = ["red", "blue", "green"];
}

function SubType(){            
}

//inherit from SuperType
SubType.prototype = new SuperType();

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,black"

说明：我们在通过实例instance1向父类属性colors中添加的元素对于所有子类实例来说都是共享的。原型链的第二个问题是：在创建子类型的实例时，不能向超类型的构造函数中传递参数，所以实践中很少单独使用原型链。

3.2 借用构造函数（很少单独使用）

在解决原型中包含引用类型值所带来问题的过程中，开发人员开始使用一种叫做借用构造函数的技术。这种技术的基本思想相当简单，即在子类型构造函数的内部调用超类型构造函数。因为函数只不过是在特定环境中执行代码的对象，因此通过使用apply()和call()方法也可以在（将来）新创建的对象上执行构造函数：

function SuperType(){
    this.colors = ["red", "blue", "green"];
}

function SubType(){  
    //inherit from 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"

说明：这里不再使用原型链中哪种将子类型原型指向超类型实例了，而是在子类型构造函数中调用父类型。这样每个子类实例都有超类型中的引用属性（colors）副本了

3.2.1 传递参数

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

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

说明：在SubType构造函数内部调用SuperType构造函数时，实际上是为SubType的实例设置了name属性。为了确保SuperType构造函数不会重写子类型的属性，可以在调用超类型构造函数后，再添加应该在子类型中定义的属性。

3.2.2 借用构造函数的问题

如果仅仅是借用构造函数，那么也将无法避免构造函数存在的问题——方法都在构造函数中定义，因此函数复用就无从谈起了。而且，在超类型的原型中定义的方法，对子类型而言也是不可见的（这不像原型链中子类原型指向超类型实例，这里并没有构造原型链，所以不能访问超类型原型方法）。考虑到这些问题，借用构造函数的技术也是很少单独使用的。

3.3 组合继承（最常见）

组合继承有时候也叫伪经典继承，指的是将原型链和借用构造函数的技术组合到一起，从而发挥二者之长的一种继承模式。其思想是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，有能够保证每个实例都有它自己的属性。

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();       //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27
alert(SubType.prototype.constructor == SuperType.prototype.constructor);//true
alert(SuperType.isPrototypeOf(instance1));//false，这里instance1不是原型链派生的实例
alert(instance1 instanceof SuperType);//true

说明：组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为JS中最常用的继承模式。而且，instanceof和isPrototypeOf()也能够用于识别基于组合模式继承创建的对象。

3.4 原型式继承

这种方法并没有严格意义上的构造函数，就是借助原型可以基于已有对象创建新对象，同时还不必因此创建自定义类型。

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

说明：此函数返回一个临时类型的一个新实例。本质上讲，object()对传入其中的对象执行了一次浅复制。看下面的例子：

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

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"

说明：这种方法中将person作为新对象的原型，于是所有新实例会共享引用属性friends，显然这是不行的。ECMAScript 5通过新增Object.create()方法规范了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象。如果只是传递第一个参数，那么和上面的object()方法的行为相同：

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

当然我们可以使用第二个参数进行修正，第二个参数与Obejct.defineProperties()方法的第二个参数格式相同：每个属性都是通过自己的描述符定义的。以这种方式指定的任何属性都会覆盖原型对象上的同名属性。

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

alert(anotherPerson.name);  //"Greg"

可以看到，这里第二个参数定义的name属性就是新对象私有的。当然我们也可以再定义一个friends属性将原型person中的同名属性覆盖掉。不要忘记：这种模式创建的对象包含引用类型值的属性始终都会共享相应的值（除非覆盖掉），就像原型模式一样。

3.5 寄生式继承

寄生式继承是与原型式继承紧密相关的一种思路。

function createAnother(original){
    var clone = object(original);
    clone.sayHi = function(){
        console.log("Hi");
    };
    return clone;
}

说明：这种模式就是创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。可以这样使用：

var person = {
    name : "Tom",
    friends : ["Shelby", "Court", "Van"]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi();//"Hi"

说明：在主要考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。前面示例继承模式中使用的object()函数不是固定的，任何能够返回新对象的函数都适用于此模式。

3.6 寄生组合式继承（最有效方式）

前面讲过，组合继承是JS最常见的继承模式；不过也有不足。最大的问题就是不论在什么情况下，都会调用两次超类型构造函数。

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.sayAge = function(){
    alert(this.age);
};

说明：第一次调用SuperType()构造函数时，SubType.prototype会得到两个属性：name和colors；它们都是SuperType的实例属性，只不过现在位于SubType的原型中。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次i又在新对象上创建了实例属性name和colors。于是，这两个属性就屏蔽了原型中的两个同名属性。如图所示：

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。背后的基本思路是，不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个部分而已。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);//创建对象
    prototype.constructor = subType;//增强对象
    subType.prototype = prototype;//指定对象
}

说明：这是寄生组合式继承的最简单的形式。这个函数接收两个参数：子类型构造函数和超类型构造函数。在函数内部，第一步是创建超类型原型的一个副本。第二部是为创建的副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性。最后一步将新创建的对象（即副本）赋值给子类型的原型。

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;
}

inheritPrototype(SubType, SuperType);

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();       //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();      //"Greg";
instance2.sayAge();       //27

说明：此种模式不仅有组合模式的优点，同时只调用一次超类型构造函数，还能够正常使用instanceof和isPrototypeOf()。