javascript 面向对象编程之继承

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

每个函数都有一个prototype属性指向原型；原型内部有个constructor属性指向函数；实例有个_proto_ 指向原型，因为浏览器差异，有的浏览器不对外开放此属性。用一幅图简单描述如下（自己画的先凑活看吧^_^）

function Person(){

}
var p1 = new Person();
console.log(Person==Person.prototype.constructor);//true

原型链

基于三者的关系，可以让子类的原型指向父类的实例，那么就能实现继承。

function Person(){

}
Person.prototype.sayName=function(){
    console.log("person's sayName");
}

function Student(){

}
Student.prototype=new Person();

var s1 = new Student();
s1.sayName();

可以看到s1指向的原型就是Person实例，s1原型中含有constructor指向Person，还有_proto_指向Person prototype，在执行s1.sayName 时，首先在Student prototype寻找sayName函数，因为没有所以继续寻找上一级原型，Person prototype中有sayName，所以执行此方法。
这种方法实现的继承有个缺点就是无法往父类构造函数传参，为了解决此问题代码改为

借用构造函数

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

function Student(){
    Person.call(this);//调用父类构造函数
}
var t1 = new Student();
t1.colors.push("black");
console.log(t1.colors);//[ 'red', 'blue', 'green', 'black' ]

var t2 = new Student();
console.log(t2.colors);//[ 'red', 'blue', 'green' ]

这个模式的优点是可以传参，缺点就是，方法如果定义在构造函数中则犯了重复创造的毛病，所以可以将函数定义在原型上。结合原型链模式和构造函数模式，推出了组合模式。

组合模式

组合模式的思路是利用原型链来继承原型的属性和方法，利用构造函数模式继承父类的属性。

function Person(name){
    this.colors=["red","blue","green"];
    this.name=name;
}
Person.prototype.sayName=function(){
    console.log(this.name);
}
function Student(name,age){
    Person.call(this,name);//调用父类构造函数
    this.age=age;
}
Student.prototype=new Person();
Student.prototype.sayAge=function(){
    console.log(this.age);
}

var t1 = new Student("jun",30);
t1.colors.push("black");
console.log(t1.colors);//[ 'red', 'blue', 'green', 'black' ]
t1.sayName();//jun
t1.sayAge();//30

var t2 = new Student("jordan",50);
console.log(t2.colors);//[ 'red', 'blue', 'green' ]
t2.sayName();//jordan
t2.sayAge();//50

组合模式既利用了原型模式也利用了构造函数模式，是目前最常用的继承模式。

原型式继承

原型式继承就是将子类原型指向父类实例的过程封装起来了，并且不用创建子类类型就可以实现继承，简化了代码；注意原型式继承就是实现了一个浅复制，如果有引用类型要注意。

function object(o){
    function F(){

    }
    F.prototype=o;
    return new F();
}

var person={
    "name":"jordan",
    "colors":["red","blue"]
};

var o1 = object(person);
o1.name="haha";
console.log(o1.name);//haha
console.log(o1.colors);//[ 'red', 'blue' ]
console.log(o1.hasOwnProperty("name"));//true,原型上的name
o1.colors.push("black");
var o2=object(person);
console.log(o2.name);
console.log(o2.hasOwnProperty("name"));//false，实例上的name
console.log(o2.colors)//[ 'red', 'blue', 'black' ]

寄生式继承

简单来说，就是封装了继承过程的代码，并做了增强，跟原型式继承差不多。缺点就是，增强函数无法复用。

function object(o){
    function F(){

    }
    F.prototype=o;
    return new F();
}

function createAnother(original){
    var obj = object(o);
    obj.someMethod=function(){

    }
    return obj;
}

寄生组合式继承

组合式继承最大的缺点是调用了两次超类型的构造方法，第一次是在Student.prototype=new Person(); 这会在Student的原型中创建一次属性，第二次是在new Student() 这会在Student实例中又创建了一次属性。寄生组合式继承的思路是，第一次调用超类构造函数的目的是为了获取超类原型的副本，可以通过复制一份超类原型去掉这一次。

function object(o){
    function F(){

    }
    F.prototype=o;
    return new F();
}

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

function Person(name){
    this.name=name;
}
Person.prototype.sayName=function(){
    console.log(this.name);
}

function Student(name,age){
    Person.call(this,name);
    this.age=age;
}
inheritPrototype(Student,Person);
var s1 = new Student("jun",30);
s1.sayName();//jun

这种模式只需要调用一次超类构造函数，是最理想的继承模式。

参考

javascript高级程序设计（第二版）