20170607-面向对象02-继承

继承

1 原型链

原型链是实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。

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

function SubType(){
    this.subproperty = false;
}
// 使SubType继承SuperType的实例 本质是重写原型对象
SubType.prototype = new SuperType();
SubType.prototype.getValue = function(){
    return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue());//true

注意 ：==instance.constructor现在指向的是SuperType,这是因为原来SubType的原型指向了另一个对象--SuperType的原型，而这个原型对象的constructor属性指向的是SuperType==

默认的原型 Objec

确定原型与实例的关系

• instanceof：用这个操作符来测试实例与原型链中出现过的构造函数，结果就会返回true

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

• 使用isPrototypeOf()方法，只要是原型链中出现的原型，都可以说是该原型链所派生的实例的原型

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

通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样会重写原型链

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;
    }
};
var instance = new SubType();
alert(instance.getSuperValue());//error!!

原型链的问题

• 包含引用类型值的原型属性会被所有实例共享，因此在构造函数中定义属性而不是在原型对象中定义属性。
  在通过原型来实现继承时，原型实际上会变成另一个类型的实例。于是，原先的实例属性也就变成了现在的原型属性了。

function SuperType(){
    this.color = ["red", "blue", "green"];
    this.name = "Nicholas";
}
function SubType(){
}
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red","blue","green","black"
instance1.name = "Tom";
alert(instance1.name); //"Tom"

var instance2 = new SubType();
// colors是引用类型，会被所有实例共享
alert(instance2.colors); // "red","blue","green","black"
alert(instance2.name); //"Nicholas"

• 没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数

function SuperType(name){
    this.name = name;
}
function SubType(name){
}
// ??如何向超类型的构造函数传递参数？？
SubType.prototype = new SuperType();

var instance2 = new SubType(name);

• 综合以上情况，实践中很少会单独使用原型链

2.借用构造函数

在子类型构造函数的内部调用超类型构造函数。

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

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); // "red,blue,green,black"

bar instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

使用这种方式，可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){
    this.name=name;
}
function SubType(){
    Super.call(this,"Nicholas");
    this.age = 29;
}

var instance = new SubType();
alert(instance.name);//"Nicholas"

• 相关问题：

会出现与构造函数模式相同的问题——方法都在构造函数中定义，函数复用就无从谈起了。而且在超类型的原型中定义的方法，对于子类型也是不可见的。

3.组合继承——JavaScrip最常用的继承模式

使用原型链实现对原型属性和方法的继承(通过在原型上定义方法实现了函数复用)，通过借用构造函数来实现对实例属性的继承(保证每个实例都有自己的属性，而且可以向超类的构造函数传递参数)。

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

var instance1 = new SubType("Nicholas",29);
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29

var instance2 = new SubType("Greg",27);
instance2.sayName(); //"Greg"
instance2.sayAge(); //27

4 原型式继承

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

function object(o){
    // 临时的构造函数
    function F(){}
    // 将传入的对象作为这个构造函数的原型
    F.prototype = o;
    // 返回新实例
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};
// 以person为原型创建一个新实例
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不仅属于person所有，而且也会被anotherPerson、yetAnotherPerson共享。

ECMAScript5通过Object.create()方法规范化了原型式继承，这个方法接受两个参数：一个用作新对象原型的对象，另一个(可选的)为新对象定义额外属性的对象。只传入一个参数的情况，和object()方法相同。

// Object.create()只用一个参数
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person);

// Object.create()用两个参数
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person, {
    name:{
        value: "Greg"
    }
});
alert(anotherPerson.name); //Greg

var yetAnotherPerson = Object.create(person, {
    // 为新对象定义新的friends属性，该属性会覆盖原型属性中的friends
    friends:{
        value: ["1","2","3"]
    }
});
alert(yetAnotherPerson.friends); //"1,2,3"
// 但是原型对象中的friends属性仍然被共享
alert(person.friends); //"shelby,court,van"
alert(anothorPerson.friends); //"shelby,court,van"

5.寄生式继承

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"

6.寄生组合式继承

组合继承无论在什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

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()

第一次调用SuperType构造函数时，SubType.prototype(SubType的原型)会得到两个属性：name和colors。当调用SubType构造函数时，又会调用一次SuperType构造函数，这一次又在新对象上创建了实例属性name和colors。于是这两个属性就屏蔽了原型中的两个同名属性

为了避免创建两次相同的属性，解决方法——寄生组合式继承。其基本思想是：不必为了指定子类型的原型而调用超类型的构造函数，我们所需要的无非就是超类型原型的一个副本而已。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

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

上诉例子只调用了一次SuperType构造函数，因此避免了在SubType.prototype上面创建不必要的、多余的属性。寄生组合式继承是引用类型最理想的继承范式
相比之下，第二段程序少了SubType.prototype = new SuperType();这使得SubType.prototype中没有了name和colors属性，实现了避免了在SubType.prototype上面创建不必要的、多余的属性的目的。