JavaScript 的继承

继承是OO语言中的一个最为人津津乐道的概念。ECMAScript实现继承主要是通过原型链来实现的。

1，原型链

我们知道，每一个构造函数都有一个原型对象，这个函数包含一个指向构造函数的指针，同时每个实例都有一个指向原型对象的内部指针。也就是说，当我们访问一个实例的属性时，先在实例中查找，如果没找到，就通过内部指针去原型中查找，若还是没找到，再通过原型的内部指针查找原型的原型对象。

 

//父类

    function Parent(){

        this.name = "父类";

    }

    //父类原型

    Parent.prototype.getName = function(){

        console.log(this.name );

    };

    //子类

    function Son(){

        this.age = 23;

    }

    //子类继承父类

    Son.prototype = new Parent();//注意这个地方父类的实例方法也在子类的原型里面了，例如name

    //给子类原型添加方法

    Son.prototype.getAge = function(){

        console.log(this.age)

    };

    //新建对象，继承子类的实例和原型

    var test = new Son();

    console.log(test.name);

    test.getName();

    console.log(test.age);

    test.getAge();

    console.log(test);

    console.log(Son.prototype);

    console.log(Parent.prototype);

    //确定实例与原型的关系 两种方法

    // instanceof

    alert(test instanceof Object);

    alert(test instanceof Son);

    alert(test instanceof Parent);

    // isPrototypeOf

    alert(Object.prototype.isPrototypeOf(test));

    alert(Son.prototype.isPrototypeOf(test));

    alert(Parent.prototype.isPrototypeOf(test));

 

 

把test和Son的原型都打印出来，就是在控制台可以看看原型链的一个继承，test的原型如上图，指向Son，Son有个age实例属性，有getAge原型属性，有name原型属性，Son 的原型指向Parent函数。整个的原型链就是这样继承下来的。

2，借用构造函数

原型链的的弊端就是，在创建子类的实例的时候，不能向父类的构造函数传参数。借用构造函数可以解决这个问题，组合继承就是结合构造函数和原型链来的，现在先单独的看下构造函数是怎么实现传参的功能的。

//父类

    function Parent(name){

        this.name = name;

    }

    //子类

    function Son(name){

        Parent.call(this, name)

    }

    var p1 = new Parent('p1');

    console.log(p1.name);// p1

    var o1 = new Son('o1');

    console.log(o1.name);// o1

    var o2 = new Son('o2');

    console.log(o2.name);// o2

 

以上可以看到，主要是借用call函数来实现传参的功能，call实现的话，只会调用父函数的示例属性和方法。

3，组合继承

上边已经提到组合继承，将两种优点结合起来，先看下示例，

//父类

    function Parent(name){

        this.name = name;

    }

    Parent.prototype.getName = function() {

        console.log(this.name);

    }

    //子类

    function Son(name){

        Parent.call(this, name);

    }

    Son.prototype = new Parent('');

    Son.prototype.constructor = Son;

    var o1 = new Son('o1');

    console.log(o1.name);

    o1.getName();// o1

    var o2 = new Son('o2');

    console.log(o2.name);

    o2.getName();// o2

 

以上两种已经写的比较详细了，Son.prototype.constructor = Son;这句需要注意一下，Son的原型已经被重写过，constructor这个属性需要重新指向本身，打印出o1，在控制台即可看出。

4，原型式继承

借用已有的对象去创建新对象，和前面的原型链相似，

两者区别是这里是根据对象创建新对象，原型链则是根据new出来的函数实现继承。

function creat(obj){

        function F(){};

        F.prototype = obj;

        return new F;

    }

    var obj = {

        name: 'abc',

        color: ['red', 'blue']

    }

    var fn1 = creat(obj);

    fn1.color.push('black')

    console.log(fn1)

    var fn2 = creat(obj);

    fn2.color.push('white')

    console.log(fn2)

    console.log(obj)

 

打印出fn1能够看出，fn1指向的是一个临时函数F，F的原型指向obj，这个函数实现了原型继承，但是类和实例的关系却是没法清晰的判断的。另，上图第一行是三个，下边是4个，正好验证了原型的动态性。

既然跟原型链的那么像，就写了个如果obj是函数的，作为对比来看下两者在代码上有何区别，原型的继承，如下

function obj() {

    }

    obj.prototype.name = 'abc';

    obj.prototype.color = ['red', 'blue'];

    var fn1 = new obj;

    fn1.color.push('black')

    console.log(fn1)

    var fn2 = new obj;

    fn2.color.push('white')

    console.log(fn2)

 

打印结果跟上边是一样的，区别就是下边的能清晰的看到原型链的继承关系。

5，寄生式继承

寄生式跟原型式是紧密联系的，可以说是寄生式在原型式的基础上的，即创建一个仅用于封装继承过程的函数，该函数在内部已某种方式来增强对象，最后返回对象。

function creat(obj){

        function F(){};

        F.prototype = obj;

        return new F;

    }

    var obj = {

        name: 'abc',

        color: ['red', 'blue']

    }

    function creatAnother(obj) {

        var fn1 = creat(obj);

        fn1.getName = function() {

            console.log(this.name);

        }

        return fn1;

    }

    var anotherObj = creatAnother(obj);

    anotherObj.getName();

使用寄生式继承来为对象添加函数，会由于不能做到函数复用率而降低效率。 

6，寄生组合式继承

上面提到的组合继承是js中常用的继承模式，但是是有不足的地方，就是对父类构造函数调用了两次。一次是创建子类型原型的时候，一次是在子类型构造函数内部。

//父类

    function Parent(name){

        this.name = name;

    }

    Parent.prototype.getName = function() {

        console.log(this.name);

    }

    //子类

    function Son(name){

        Parent.call(this, name);//第二次调用

    }

    Son.prototype = new Parent(''); //第一次调用

    Son.prototype.constructor = Son; // 将子类的constructor属性指回自己

    var o1 = new Son('o1');

    console.log(o1.name);

    o1.getName();

    var o2 = new Son('o2');

    console.log(o2.name);

    o2.getName();

 

第一次调用，是给子类的原型上边加上父类的实例属性name,第二次是给子类实例添加实例属性name，子类的实例属性就屏蔽掉原型里面name属性。

那能不能再创建子类型的原型的时候，只将父类的原型给子类，没有必要在子类的原型上创建多余的属性。按照这个想法，用两种方法实现了下，

function creat(obj){

        function F(){};

        F.prototype = obj;

        return new F;

    }

    function inherit(son, parent) {

        var proto = creat(parent.prototype);

        proto.constructor = son;

        son.prototype = proto;


    }

    //父类

    function Parent(name){

        this.name = name;

    }

    Parent.prototype.getName = function() {

        console.log(this.name);

    }

    //子类

    function Son(name){

        Parent.call(this, name)

    }

    Son.prototype = new Parent(''); //第一种写法

//    Son.prototype = Parent.prototype; //第二种写法

//    inherit(Son, Parent)  // 第三种写法

    Son.prototype.constructor = Son;

    var o1 = new Son('o1');

    console.log(o1);

    console.log(Son);

    console.log(Parent);

第二种是自己写着简单实现的一个写法，后来发现这样会把原型指向搞乱掉，Son.prototype.constructor = Son;这句会将父类的constructor 也指向到Son。

第三种就是寄生组合继承了，只调用了一次构造函数，又避免在子类创建多余属性。