细讲继承的方式

链接上一篇的构造函数和原型的代码

function Person(){  
    this.name = "bella";
    this.sex="female";
}

Person.prototype.sayHello = function(){
    console.log(this.name +"say hello");
};

function Child(age){
    this.age = age;
}
Child.prototype = new Person();
var childOne = new Child(22);

该方法也有一个很明显的缺点，就是实例化子类的时候不能给父类传参。

function Person(name,sex){   //构造函数
    this.name = name;
    this.sex= sex;
}

Person.prototype.sayHello = function(){  构造函数原型挂载方法
    console.log(this.name +"say hello");
};

function Child(name,age){
    this.age = age;
}


Child.prototype = new Person('alex','female');
var childOne = new Child("bella",22);
childOne.sayHello();  // alex say hello,应该是bella say hello

那就结合对象冒充和原型链两种方法实现继承,这种方式称为：组合继承

function Person(name,sex){
    this.name = name;
    this.sex= sex;
}

Person.prototype.sayHello = function(){
    console.log(this.name +" say hello");
};

function Child(name,sex,age){
    Person.apply(this,[name,sex]);
    this.age = age;
}


Child.prototype = new Person();
var childOne = new Child("bella","female",22);
childOne.sayHello();  // bella say hello

总结：成员变量采用对象冒充，成员方法采用原型链方式

到这里，你会觉得这个方案已经无可挑剔了吗？

答案是这个方案还是可以优化的。通过代码可以看到，Person在使用过程中会被调用两次，一次是Person.apply，一次是New Person()的时候。

上面的问题可以通过“寄生组合式继承”来解决。那什么是寄生组合式继承？

寄生组合式：通过构造函数来继承属性，通过原型链来继承方法。具体实现原理如下：

首先都知道js类是通过原型和构造器实现的，js中将类的方法放在function的prototype里面了，它的每一个实例对象都可以获得该类的方法，因此实现了继承

function Person(name,sex){
    this.name = name;
    this.sex = sex;
}
Person.prototype.sayHello = function(){
    console.log(this.name + "say hello");
}
function Female(age){
    this.age = age;
};
//Female也是Person,那么Female怎么去实现继承呢？

实现继承：

Female.prototype == Person.prototype //错误的实现

这种方式只是简单的将Femal的原型指向了Person的原型，即Female和Person指向同一个原型，当子类Female增删改原型方法时，父类Person的原型也会被改变，所以该方法是不可取的。那么应该怎么做呢？

就是让Female的proto属性指向Person的prototype对象，而不是直接把prototype指向Person的prototype。

但是Femal.prototyoe.proto = Person.prototype; //也是不正确的

因为proto不是一个标准的语法，在有些浏览器是获取不到这个属性的。

那么合理的做法应该是：让Female的prototype指向一个obejct,这个object的proto指向Person的prototype

大概实现如下图：

image

那么具体实现是：通过Object.create()克隆一个新的prototype(该方法是在ES5中出现的，之前版本可以通过属性遍历实现浅拷贝)

Female.prototype = Object.create(Person.prototype);

console.log(girl instanceof Female); //false 这里又为什么是false？

这里就还包含了一个问题，就是constructor的指向不对，因为是clone过来的prototype,那么prototype中的constructor还是指向Person()，那么需要把

Femal.construtor = Femal;　这样就彻底实现了继承

一般可以将该实现封装成一个方法

function inherit(superType,subType){
     var _prototype = Object.create(superType.prototype);
     _prototype.construcotr = subType;
     _prototype.prototype = _prototype;
 }

那么完整代码：

function inherit(superType, subType) {
    var _prototype = Object.create(superType.prototype);
    _prototype.construcotr = subType;
    subType.prototype = _prototype;
}

function Person(name, sex) {
    this.name = name;
    this.sex = sex;
};
Person.prototype.sayHello = function() {
    console.log(this.name + "say hello");
}

function Female(name, sex, age) {
    Person.call(this, name, sex);
    this.age = age;
};

//Female也是Person,那么Female怎么去实现继承呢？
// 在继承函数之后写自己的方法，否则会被覆盖
inherit(Person, Female);

Female.prototype.printAge = function() {
    console.log(this.age);
};
var fm = new Female('Byron', 'm', 26);
fm.sayHello();