JS继承

1、简介

      在JS中继承是一个非常复杂的话题，比其他任何面向对象语言中的继承都复杂得多。在大多数其他面向对象语言中，继承一个类只需使用一个关键字 即可。在JS中想要达到继承公用成员的目的，需要采取一系列措施。JS属于原型式继承，得益于这种灵活性，我们既可以使用标准的基于类的继承，也可以使用 更微妙一些的原型式继承。在JS中应该要明确一点，一切继承都是通过prototype来进行的，且JS是基于对象来继承的。

2、最直观的继承方式

我们假设现在有这么一个继承层次：一个Person基类，含有name属性和一个getName方法；一个Author类，继承了Person类，有着特有的books属性和getBooks方法。最简单的类式继承方法如下：

   /*Class Person*/

    function Person(name){

        this.name = name;

    }

      

    Person.prototype.getName = function(){

            return this.name;

    };

      

    /*Class Author*/

    function Author(name, books){

        Person.call(this, name); //调用父类构造函数，第二次调用父类构造函数

        this.books = books;

    }

      

    Author.prototype = new Person(); //设置原型链以获得父类的方法， 第一次调用父类构造函数

    Author.prototype.constructor = Author; //设置构造函数

    Author.prototype.getBooks = function(){

        return this.books;

    }; 

上述代码的不足之处在于：实例化Authro对象时，将会2次调用父类的构造函数，且需要额外的保存原型链中实例化父类的对象，上述代码就保存了父类中的 一份name属性，事实上这是不必要的。 如果继承层次多些，属性也多些，这个造成的负担就大了。 我们可以对此进行改进，事实上，我们需要的只是父类的原型上的东西，那些父类包含的属性通过调用父类构造函数已经获得了。另外，上述代码看起来似乎父类和 子类的关联性不大，因此在这里，我们给函数原型增加一个extend函数，以明确表明继承层次，于是有了下面的原型式继承。

3、原型式继承

     谈到原型式继承时，最好忘掉自己关于类和实例的一切知识，只从对象的角度来思考。 前面我们说到，JS是基于对象来继承的，对象的prototype属性实质也是指向一个实例化的对象。因此，我们可以想到，并不需要用类（构造函数）来定 义对象的结构，只需直接创建一个对象即可。请看下面的代码：

   /*extend函数，实现原型式继承*/

    var extend = function(obj){

        if(typeof obj !== 'object'){

            throw new Error('fatal error: "Object.prototype.extend" expects a object');

        }

          

        var F = function(){}; //创建一个中间函数对象

        F.prototype = obj; //设置其原型对象指向obj

          

        return new F();//返回实例化的F

    };

      

    /*父类字面量对象*/

    var Person = {

        init: function(name){ //初始化函数，进行各种属性设置，代替了构造函数的作用

            this.name = name;

        },

        getName:function(){

            return this.name;

        }

    };

      

    /*子类对象*/

    var author1 = extend(Person); //继承Person

    author1.init('author');

    alert(author1.getName()); //输出author

    author1.books = 'xxx'; //设置自己的属性

    author1.getBooks = function(){

        return this.books;

    };

    alert(author1.getBooks());//输出xxx 

上述代码通过全局的extend函数实现继承，接着根据需求进行成员的增加，父类的init函数充当了构造函数的角色，本质上，还是相当于将 prototype指向一个实例化的Object对象。然而习惯了new操作符的同学可能会很不习惯这种方式的继承，包括我也很不习惯。为了使代码更符合 我们的习惯，于是有了类式的继承。

4、类式继承

      类式继承则是模拟传统的面向对象语言实现的，通过给Function的prototype增加一个extend函数，子类构造函数通过 extend函数继承父类，同时又通过内部我们设置的一个指向父类对象的引用，让我们可以很容易的直接调用父类对象的方法。具体如下：

   /*给函数原型增加一个extend函数，实现继承*/

    Function.prototype.extend = function(superClass){

        if(typeof superClass !== 'function'){

            throw new Error('fatal error:Function.prototype.extend expects a constructor of class');

        }

          

        var F = function(){}; //创建一个中间函数对象以获取父类的原型对象

        F.prototype = superClass.prototype; //设置原型对象

        this.prototype = new F(); //实例化F, 继承父类的原型中的属性和方法，而无需调用父类的构造函数实例化无关的父类成员

        this.prototype.constructor = this; //设置构造函数指向自己

        this.superClass = superClass; //同时，添加一个指向父类构造函数的引用，方便调用父类方法或者调用父类构造函数

          

        return this;

    };

          

          

    /*Class Person*/

    function Person(name){

        this.name = name;

    }

    Person.prototype.getName = function(){

            return this.name;

    };

      

      

    /*Class Author*/

    function Author(name, books){

        Author.superClass.call(this, name);

        this.books = books;

    }

    /*

     * 这里用了链式调用，下面语句等价于：

     * Author.extend(Person); Author.prototype.getBooks = function(){```};

     */

    Author.extend(Person).prototype.getBooks = function(){

        return this.books;

    };

    /*方法的覆写，通过superClass调用父类的方法获得基本信息，再调用子类的方法获得更特殊的信息*/

    Author.prototype.getName = function(){

        var name = Author.superClass.prototype.getName.call(this);

        return name + ', Author of ' + this.getBooks();

    };

上述代码的继承方式应该是现在各大框架和JS库最流行的继承方式了，一方面仅在实例化对象的时候调用了一次构造函数，且没有保存不必要的父类实例化的属性，通过superClass属性，又可以很轻松的调用父类的方法重写或增强子类的方法。

5、成员的扩充

      也许，有时候我们想给现有的对象扩充一组成员，于是我们可以把这组需要扩充的成员保存在一个对象中，然后遍历添加。于是我们扩展下extend函数，让其也可以接受类型为object的参数。

   Function.prototype.extend = function(superClass){

        if(typeof superClass === 'function'){//类式继承

            var F = function(){}; //创建一个中间函数对象以获取父类的原型对象

            F.prototype = superClass.prototype; //设置原型对象

            this.prototype = new F(); //实例化F, 继承父类的原型中的属性和方法，而无需调用父类的构造函数实例化无关的父类成员

            this.prototype.constructor = this; //设置构造函数指向自己

            this.superClass = superClass; //同时，添加一个指向父类构造函数的引用，方便调用父类方法或者调用父类构造函数

        } else if(typeof superClass === 'object'){ //方法的扩充

            var pro = this.prototype;

            for(var k in superClass){

                if(!pro[k]){ //如果原型对象不存在这个属性，则复制

                    pro[k] = superClass[k];

                }

            }

        } else {

            throw new Error('fatal error:"Function.prototype.extend" expects a function or object');

        }

          

        return this;

    };

    /*调用方式*/

    Author.extend({

        sayHello:function(){

            alert('Hello');

        }

    }).extend(classFunction.prototype);//原型也是对象，所以一样可以作为参数传入，这样便扩展了其他类的原型方法，有点类似多重继承。 

上述代码中，我们扩展了extend函数，使其可以接受object类型的参数，以此实现成员的扩充，同时，若你不需要父类构造函数的调用，或者不想改变 指向父类对象的引用，则可以通过传递新的构造函数的prototype即可。如果我们又有需求了，只需要扩展传递对象的部分方法，那么可以继续改造我们的 extend函数，参数大于2的时候，后面的参数就是需要扩展的属性了。

       事实上，扩展后的extend函数也有些原型式继承的味道，只不过我们仍然需要定义子类的构造函数。从另一个角度看，扩展成员也有点多重继承的味道。