js继承的实现（原型/链、函数伪装）

一、原型继承父类的实例

        //父类及其原型属性/方法
        function SuperType () {
            this.name = ['zc','ls','ww'];
        }
        SuperType.prototype.getSuperName = function() {
            return this.name;
        };


        //子类及其原型属性/方法
        function SubType() {
            this.test = ['a','b','c','d'];
        }
        //子类型的原型指向父类型的实例(即子类的原型复制了父类的构造器以及父类原型属性/方法)
        SubType.prototype = new SuperType();①
        //为子类原型添加原型拓展属性/方法
        SubType.prototype.getSubTest = function() {
            return this.test;
        }

        var instance1 = new SubType();
        instance1.name.push('yzy');//name属性是原型继承自父类实例
        instance1.test.push('e');//test属性是源于子类本身的构造器
        console.log(instance1.name,instance1.test)

        var instance2 = new SubType();
        console.log(instance2.name,instance2.test)

控制台输出：

标注：

①注意这里的子类原型指向一个父类的实例（引用传递），那么这块的父类实例就是内存中的一块地址，以后所有的子类实例都会有一个原型属性指向这块地址，并且子类A对这块地址中数据更改也会影响到子类B。

图示：

 

所以你可以看到，instance1.name是从父类实例来的，这个属性实际存在于这个单例，访问的时候都是引用传递，由于这个单例是共享的，instance1 push了一个数据，那么就算instance2没有任何动作，instance2读的时候数据也会是变化后的数据；

而对于test属性，是子类自身的，所以这个属性值存在于子类实例自身，相互之间互不影响，所以虽然instance1.test push了一个数据，但是instance2访问的时候丝毫不受影响。

缺点：继承自父类实例的原型属性会被所有实例所共享。

二、构造函数伪装（call()、apply()）

        //父类及其原型属性/方法
        function SuperType(name) {
            this.name = name;
            this.color = ['green','red'];
        }
        SuperType.prototype.getSuperName = function() {
            return this.name;
        }

        //子类及其原型属性/方法
        function SubType(name) {
            SuperType.call(this, name);①
            this.test = ['a','b','c','d'];
        }
        SubType.prototype.getSubTest = function() {
            return this.test;
        }

        var instance1 = new SubType('Jack');
        console.log(instance1.name,instance1.getSubTest());
        console.log('------------------------');
        console.log(instance1.getSuperName())

控制台输出：

标注：

①call()方法实际上就是在当前作用域拷贝了一下函数执行者的构造函数/方法，所以上述call()方法实际上做了如下的事情

        //子类及其原型属性/方法
        function SubType(name) {
            //SuperType.call(this, name);
            this.name = name;
            this.color = ['green','red'];
            
            this.test = ['a','b','c','d'];
        }

注意的是，call()函数伪装并不会在当前作用域执行 SuperType 原型下的方法/属性

所以，因为 getSuperName() 是父类原型下的方法，所以call() 方法自然不会复制该方法给 SubType 构造器，因此控制台报错也就是理所当然的咯

缺点：函数伪装不会继承父类原型下的属性/方法。

三、组合继承（函数伪装 + 原型继承）

        //父类及其原型属性/方法
        function SuperType(name) {
            this.name = name;
        }
        SuperType.prototype.getSuperName = function () {
            return this.name;
        }

        // 子类1及其原型属性/方法
        function SubType1(name) {
            SuperType.call(this, name);
            this.test = ['h1', 'h2', 'h3', 'h4'];
        }
        SubType1.prototype = SuperType.prototype;①
        SubType1.prototype.getSubTest = function () {
            return this.test;
        }


        // 子类2及其原型属性/方法
        function SubType2(name) {
            SuperType.call(this, name);
            this.age = 18;
        }
        SubType2.prototype = SuperType.prototype;
        SubType2.prototype.getSubAge = function () {
            return this.age;
        }

        var instance1 = new SubType1('Jack');
        var instance2 = new SubType2('Tom');
        console.log(instance1,instance2);

控制台输出：

标注：

①这里子类原型继承自父类原型，然后子类为原型添加了原型拓展，这里的原型继承是引用传递，所以添加拓展的操作都是基于同一块内存地址的。

图示：

所以，无论是父类的原型属性还是子类继承的原型（父类原型），实际上都是引用传递，都指向内存中的同一块地址，因此，上述的代码，虽然子类2虽然没有原型方法 getSubTest，但是实际上子类1已经在他们指向的共同内存地址添加了该方法，同理子类1也是。

缺点：子类型的原型属性共享。

四、寄生组合式继承

        function object(o) {
            function F() { };
            F.prototype = o;
            return new F();
        }
        //寄生组合式继承 ①
        function inheritPrototype(subType, superType) {
            var prototype = object(superType.prototype);
            subType.prototype = prototype;
        }

        //父类及其原型属性/方法
        function SuperType(name) {
            this.name = name;
        }
        SuperType.prototype.getSuerperName = function () {
            return this.name;
        }

        //子类1及其原型属性/方法
        function SubType(name) {
            SuperType.call(this, name);
            this.test = ['h1', 'h2', 'h3', 'h4'];
        }
        inheritPrototype(SubType, SuperType);
        SubType.prototype.getSubTest = function () {
            return this.test;
        };

        //子类2及其原型属性/方法
        function SubType2(name) {
            SuperType.call(this, name);
            this.test2 = ['s1', 's2', 's3', 's4'];
        }
        inheritPrototype(SubType2, SuperType);
        SubType2.prototype.getSubTest2 = function () {
            return this.test2;
        };

        /* 以下为测试代码示例 */
        var instance1 = new SubType(['yyy', 'Jack', 'Nick']);
        var instance2 = new SubType2(['yyy2', 'Jack2', 'Nick2']);
        console.log(instance1,instance2)

控制台输出：

标注：

①我们看这个寄生组合式继承的处理方式，传进来一个子类和父类，子类的原型 = 新对象（新对象的原型 = 父类的原型），所以就是子类原型下的原型 = 父类的原型

这就是我们所看到的上面控制台输出的结果了，父类的原型挂在子类原型下的原型下，这样为各个子类添加原型的时候就不会影响挂在上面的父类原型了。

但是，由于依旧是引用传递，所以这个子类原型下原型（继承自父类的原型）依旧是共享的。

图示：

为达上述目的，我这边直接将父类实例挂在子类原型上，也是可以的：

        //寄生组合式继承
        function inheritPrototype(subType, superType) {
            subType.prototype =new superType();②
        }

        //父类及其原型属性/方法
        function SuperType(name) {
            if(name){
                this.name = name;
            }
        }
        SuperType.prototype.getSuerperName = function () {
            return this.name;
        }
        
        //子类1及其原型属性/方法
        function SubType(name) {
            SuperType.call(this, name);
            this.test = ['h1', 'h2', 'h3', 'h4'];
        }
        inheritPrototype(SubType, SuperType);
        SubType.prototype.getSubTest = function () {
            return this.test;
        };

        //子类2及其原型属性/方法
        function SubType2(name) {
            SuperType.call(this, name);
            this.test2 = ['s1', 's2', 's3', 's4'];
        }
        inheritPrototype(SubType2, SuperType);
        SubType2.prototype.getSubTest2 = function () {
            return this.test2;
        };

        /* 以下为测试代码示例 */
        var instance1 = new SubType(['yyy', 'Jack', 'Nick']);
        var instance2 = new SubType2(['yyy2', 'Jack2', 'Nick2']);
        console.log(instance1,instance2)

标注：

②这里挂载在子类原型下的原型的是一个父类的实例，值得注意的是，实例化一个父类实例是会自动调用父类构造器的，所以会将父类构造器以及父类原型一同挂载到子类原型下的原型下，不妨让我们把上述例子中的父类构造器if判断去掉看看控制台输出结果：

讲到这里你是不是觉得已经结束了？？？当然~~~没有！

上面说过：这个子类原型下原型（继承自父类的原型）依旧是共享的！

那么我后来做了个实验：

Ⅰ.父类原型属性值是基本数据类型：

        //寄生组合式继承
        function inheritPrototype(subType, superType) {
            subType.prototype =new superType();
        }

        //父类及其原型属性/方法
        function SuperType(name) {
            if(name){
                 this.name = name;
            }
        }
        SuperType.prototype.getSuerperName = function () {
            return this.name;
        }

---

        SuperType.prototype.age = 12
        SuperType.prototype.console = function(){
            this.age += 1;
            console.log(this.age)
        };

---

//子类1及其原型属性/方法
        function SubType(name) {
            SuperType.call(this, name);
            this.test = ['h1', 'h2', 'h3', 'h4'];
        }
        inheritPrototype(SubType, SuperType);
        SubType.prototype.getSubTest = function () {
            return this.test;
        };

        //子类2及其原型属性/方法
        function SubType2(name) {
            SuperType.call(this, name);
            this.test2 = ['s1', 's2', 's3', 's4'];
        }
        inheritPrototype(SubType2, SuperType);
        SubType2.prototype.getSubTest2 = function () {
            return this.test2;
        };

        /* 以下为测试代码示例 */
        var instance1 = new SubType(['yyy', 'Jack', 'Nick']);
        var instance2 = new SubType2(['yyy2', 'Jack2', 'Nick2']);
        instance1.console();
        instance1.console();
        instance1.console();
        instance1.console();
        instance1.console();
        instance2.console();

控制台输出：

结果说明：父类原型下的age属性没有共享！

Ⅱ.父类原型属性值是非基本数据类型（例如：对象）：

        //寄生组合式继承
        function inheritPrototype(subType, superType) {
            subType.prototype =new superType();
        }

        //父类及其原型属性/方法
        function SuperType(name) {
            if(name){
                 this.name = name;
            }
        }
        SuperType.prototype.getSuerperName = function () {
            return this.name;
        }

---

        SuperType.prototype.age = {
            age:12
        }
        SuperType.prototype.console = function(){
            this.age.age += 1;
            console.log(this.age.age)
        };

---

//子类1及其原型属性/方法
        function SubType(name) {
            SuperType.call(this, name);
            this.test = ['h1', 'h2', 'h3', 'h4'];
        }
        inheritPrototype(SubType, SuperType);
        SubType.prototype.getSubTest = function () {
            return this.test;
        };

        //子类2及其原型属性/方法
        function SubType2(name) {
            SuperType.call(this, name);
            this.test2 = ['s1', 's2', 's3', 's4'];
        }
        inheritPrototype(SubType2, SuperType);
        SubType2.prototype.getSubTest2 = function () {
            return this.test2;
        };

        /* 以下为测试代码示例 */
        var instance1 = new SubType(['yyy', 'Jack', 'Nick']);
        var instance2 = new SubType2(['yyy2', 'Jack2', 'Nick2']);
        instance1.console();
        instance1.console();
        instance1.console();
        instance1.console();
        instance1.console();
        instance2.console();

控制台输出：

结果说明：父类原型下的age属性共享！

 

综上所述：

　　原型上的基本数据类型属性是值传递（内存地址不共享）；

　　原型上的非基本数据类型属性是引用传递（内存地址共享）。