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

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

作者: 苦茶_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库中提供的一个方法

相关文章

  • JavaScript的六种继承方式

    JavaScript的几种继承方式 原型链继承 借助构造函数继承(经典继承) 组合继承:原型链 + 借用构造函数(...

  • JS闭包-继承

    形成一个闭包函数里面返回一个函数 继承继承的几种方式1.ES6 extends 继承的几种方式1.构造函数继承构造...

  • 对象的创建与继承

    创建对象的几种方法 1、字面量 2、通过构造函数 3、Object.create 继承的几种方式 1、构造函数 缺...

  • 第六章(3):继承

    继承的几种方式 原型链 原型链示意图: 构造函数 组合继承(将原型链和构造函数组合在一起) 原型式继承 寄生式组合...

  • 聊一聊js的几种继承方式

    在js中, 很多地方需要使用到继承, 废话少说, 今天来聊一聊js几种继承方式的优缺点 构造函数继承functio...

  • JS面向对象

    类与实例 创建类 实例化 类与继承 实现继承的几种方式 方式一:利用构造函数进行继承 但是这种方法缺点是无法继承父...

  • 【JS】构造函数继承的几种实现方式

    One Day One Tip 之 构造函数继承的几种实现方式 CreateTime:2016-08-31 14:...

  • 继承和函数进阶

    一. 继承的几种方式 1.继承 对象拷贝:for……in :父对象的属性拷贝给子对象。 2.原型继承 3.构造函数...

  • JavaScript中继承的实现方式---笔记

    继承的几种实现方式:原型链、借用构造函数、组合继承、原型式继承、寄生式继承、寄生组合式继承;继承的实现,一般有接口...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

网友评论

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

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