原型的几种继承模式和模拟底层完美继承机制

哈罗，我又来了，坚持学习，坚持更新，分享一下我昨天学习的视频内容叭，废话不多说，看下面代码

原型的几种继承模式

        // 1.原型继承(既继承了模板，也继承了原型对象)

        // 父类构造函数
        //   function Person(name,age){
        //        this.name=name;
        //        this.age=age;
        //   }
        // //   父类原型
        // Person.prototype={  //简单原型
        //     constructor:Person,//这句话必须添加
        //     sayName:function(){
        //          alert(this.name);
        //     },
        // };

        // // 子类构造函数
        // function Boy(sex){
        //         this.sex=sex;
        // }

        // // 原型继承
        // Boy.prototype=new Person('z3');//但是子类要调用父类的属性，必须要在父类里给实参
        // // 实例
        // var b=new Boy();
        // alert(b.name);  // （如果子类里又改属性，就从子类里调用，没有就向父类里中）
        //  b.sayName();

    //  2.类继承：只继承模板，不继承原型（也叫借用构造函数继承）
    
        // // 父类构造函数
        // function Person(name,age){
        //        this.name=name;
        //        this.age=age;
        //   }
        // //   父类原型
        // Person.prototype={  //简单原型
        //     constructor:Person,//这句话必须添加
        //     sayName:function(){
        //          alert(this.name);
        //     },
        // };

        // // 子类构造函数
        // function Boy(name,age,sex){  //所以这里没有父类的形式就要手动加上
        //     // call apply 可以把方法添加到子类里(把person当方法来看)
        //     // this指向调用者b,所以就通过call方法把Person模板添加到子类里
        //     Person.call(this,name,age);  //实现了 借用构造函数继承
        //         this.sex=sex;
        // }

        // var b=new Boy('z3',23,'男');
        // alert(b.name)
        // alert(b.sex);
        // b.sayName();//因为没有继承原型，所以不能调用sayName()方法



    //  3.混合继承=原型继承+借用构造函数继承
     // 父类构造函数
     function Person(name,age){
               this.name=name;
               this.age=age;
          }
        //   父类原型
        Person.prototype={  //简单原型
            constructor:Person,//这句话必须添加
            sayName:function(){
                 alert(this.name);
            },
        };

        // 子类构造函数  1.借用构造函数继承
        function Boy(name,age,sex){  //所以这里没有父类的形式就要手动加上
            // call apply 可以把方法添加到子类里(把person当方法来看)
            // this指向调用者b,所以就通过call方法把Person模板添加到子类里
            Person.call(this,name,age);  //实现了 借用构造函数继承
                this.sex=sex;
        }
       
    //    2.原型继承
     Boy.prototype=new Person();

 //   这样就实现了混合继承(可以在子类给实参，继承了模板，也继承了原型)
     var b=new Boy('z3',24,'男');
     alert(b.name);
     b.sayName();  //可以调用原型里的方法

模拟底层完美继承机制

//按我标记的顺序来看代码

  **== 一.这里是第三步 ==**
    // 模拟extjs底层继承机制
    //   完美的继承 (两个参数：子类，父类)
    function extend(sub,sup){
        // 目的 ：实现只继承原型
        // 1.创建一个空函数来 进行中转
        var F=Function ();  //因为是空函数，没有模板
        F.prototype=sup.prototype;//2.实现了空函数和父类的原型转换
        sub.prototype=new F ();//3.原型继承  实现了只继承原型（这里sub的构造器是F）
        sub.prototype.constructor=sub;//4.还原构造器
        // 保存父类的原型:一方面方便解耦，另一方面为了方便获得父类的原型对象
        sub.superClass=sup.prototype;   //自定义一个子类的静态属性
        //判断父类的原型构造器（加保险）
        if(sup.prototype.constructor == Object.prototype.constructor){
            sup.prototype.constructor=sup;
        }

    }

      **== 一.这里是第一步 ==**
      //  混合继承=原型继承+借用构造函数继承
     // 父类构造函数
     function Person(name,age){
               this.name=name;
               this.age=age;
          }
        //   父类原型
        Person.prototype={  //简单原型
            constructor:Person,//这句话必须添加 (没有加的话，上面加了保险)
            sayName:function(){
                 alert(this.name);
            },
        };

        // 子类构造函数  1.借用构造函数继承
        function Boy(name,age,sex){  //所以这里没有父类的形式就要手动加上
            // call apply 可以把方法添加到子类里(把person当方法来看)
            // this指向调用者b,所以就通过call方法把Person模板添加到子类里
            // Person.call(this,name,age);  //实现了 借用构造函数继承
              **== 一.下面这一句是第四步 ==**
            Boy.superClass.constructor.call(this,name,age);//这样写就不会出现父类的代码了
                this.sex=sex;
        }
            
    //    2.原型继承
    //  Boy.prototype=new Person();
    // 调用extend方法  只继承原型
    extend(Boy,Person);
     // 如果给子类的原型里添加一个sayName();方法，就会覆盖父类的sayName();方法
     Boy.prototype.sayName=function(){
            alert('hello word!');
        }    **== 一.这个方法是第五步 ==**

 //   这样就实现了混合继承(可以在子类给实参，继承了模板，也继承了原型)
     var b=new Boy('z3',24,'男');
     alert(b.name);
    //  b.sayName();  //可以调用原型里的方法

    // 如果非调用父类的sayName();方法，可以通过以下代码来实现   **== 一.这里是第六步 ==**
    Boy.superClass.sayName.call(b);//直接在父类的原型里找到sayName();方法，然后执行一下

  **== 一.这里是第二步 ==**
    //  所以混合继承：继承了两次模板，一次原型(代码多时，效率低)

    // 那么现在我们要只继承一次模板，一次原型
     //    2.原型继承  就是要改变这里。使这里只继承原型
    //  Boy.prototype=new Person();
    // 所以可以自定义一个extend方法来实现

好了，今天就到这了，有什么问题可以问我，有什么建议也可以提出来哈