美文网首页
构造函数中继承的几种方式

构造函数中继承的几种方式

作者: 苦茶_12138 | 来源:发表于2018-05-27 14:02 被阅读0次

    第一种:原型链继承

                            Grand.prototype.lastName="deng";

                                 function Grand ( ){

                                  }

                                var grand = new Grand();

                            Father.prototype=grand;

                                 function Father ( ){

                                 }

                              var father =  new Father();

                              Son.prototype= father;

                                  function Son ( ){

                                 }

                                 var son = new Son();

                             console.log(son.lastName); //deng

                缺点:原型链一层一层的继承,可能会继承到很多自己不需要的属性


       第二种:借用构造函数

                function Father (name,age,sex){

                       this.name=name;

                       this.age=age;

                       this.sex=sex;

                }

               function Son (name,age,sex,grade){

                  Father.call (this,name,age,sex);

                  this.grade=grade;

               }

               var son = new Son("张三",20,"男",100);

               console.log(son);      //Son {name: "张三", age: 20, sex: "男", grade: 100}

            缺点 : 不能继承构造函数中的原型

                      每次执行,构造函数都要多走一个函数


      第三种:共享原型(把父级的原型赋值给子级)

                  Father.prototype.lastName = "Zhang";

                        function Father ( ){

                         }

                        var father = new Father();

                Son.prototype = Father.prototype;

                      function Son ( ){

                      }

                     var son = new Son();

              console.log(son.lastName);// Zhang

              Son.prototype.sex ="男";

              console.log(son.sex)      //男

              console.log(father.sex)    //男

    缺点 : 当自己在改变自己的原型时,父级的原型也会被修改    


        第四种:圣杯型,(第三种的进阶版)

             Father.prototype.lastName= "zhao"

                      functionFather ( ){

                     }

                    var father= new Father();

                    function F ( ) { }   // 在继承与被继承的两个构造函数之间加了一个中间层  

             F.prototype=Father.prototype;

            Son.prototype= new F();

                function   Son ( ){

                }

                var son= new Son();

                console.log(son.lastName);      //zhao

                Son.prototype.sex= "女";

                console.log(son.sex);      //女

                console.log("父级的性别是"+father.sex);      //undefind

        比较完美了


    在第四种方法的基础之上,封装了一个函数

    普通写法:

         function inherit ( Target, Origin){

                  function F()  {};

                  F.prototype=Origin.prototype;

                  Target.prototype = new F();

                   Target . prototype . constuctor = Target;    //将继承函数的原型指向自己 ,  (用这个方法,默认的指向是被继承的函数)

                   Target . prototype . uber  = Origin.prototype;    //知道自己的原型最终继承于谁    (这一行代码,可要可不要)

    }

    高大上写法:

          function inherit(){

                var F = function ( ) { };

                return function (Target, Origin ){

                                F.prototype=Origin.prototype;

                               Target.prototype = new F();

                               Target . prototype . constuctor = Target;   

                               Target . prototype . uber  = Origin.prototype;  

                }

        }

    两种写法,实质上是一样的.只是写法不同,,,,,高大上的写法是雅虎公司YUI3库中提供的一个方法

    相关文章

      网友评论

          本文标题:构造函数中继承的几种方式

          本文链接:https://www.haomeiwen.com/subject/mwybjftx.html