`
bird12010
  • 浏览: 7490 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

寄生组合式继承

 
阅读更多
<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>寄生组合式继承</title>
    <script type="text/javascript">
    /*
组合继承是JavaScript 最常用的继承模式;
不过,它也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。没错,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。
    */
      function object(o) {
          function F() {}
          F.prototype = o;
          return new F();
      }

      function inheritPrototype(subType, superType) {
          var prototype = object(superType.prototype); //创建对象
          prototype.constructor = subType; //增强对象
          subType.prototype = prototype; //指定对象
      }

      function SuperType(name) {
          this.name = name;
          this.colors = ["red", "blue", "green"];
      }

      SuperType.prototype.sayName = function() {
          alert(this.name);
      };

      function SubType(name, age) { //当调用SubType 构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors。于是,这两个属性就屏蔽了原型中的两个同名属性
          SuperType.call(this, name); //第二次调用SuperType()
          this.age = age;

      }

      SubType.prototype = new SuperType(); //第一次调用SuperType() SubType.prototype 会得到两个属性:name 和colors;它们都是SuperType 的实例属性,只不过现在位于SubType 的原型中。
      SubType.prototype.sayAge = function() {
          alert(this.age);
      };


      var instance1 = new SubType("flyer", 29);
      instance1.colors.push("black");
      alert(instance1.colors); //"red,blue,green,black"
      instance1.sayName(); //"flyer";
      instance1.sayAge(); //29


      var instance2 = new SubType("bing", 27);
      alert(instance2.colors); //"red,blue,green"
      instance2.sayName(); //"bing";
      instance2.sayAge(); //27
    
        
    </script>
</head>
<body>

</body>
</html>

 改进:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <title>寄生组合式继承</title>
    <script type="text/javascript">
    /*
这个例子的高效率体现在它只调用了一次SuperType 构造函数,并且因此避免了在SubType.
prototype 上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用
instanceof 和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
    */        
        function object(o) {
            function F() {}
            F.prototype = o;
            return new F();
        }

        function inheritPrototype(subType, superType) {
            var prototype = object(superType.prototype); //创建对象
            prototype.constructor = subType; //增强对象
            subType.prototype = prototype; //指定对象
        }

        function SuperType(name) {
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }

        SuperType.prototype.sayName = function() {
            alert(this.name);
        };

        function SubType(name, age) {
            SuperType.call(this, name);

            this.age = age;
        }
         //SubType.prototype = new SuperType(); //第一次调用SuperType() SubType.prototype 
        inheritPrototype(SubType, SuperType);

        SubType.prototype.sayAge = function() {
            alert(this.age);
        };

        var instance1 = new SubType("flyer", 29);
        instance1.colors.push("black");
        alert(instance1.colors); //"red,blue,green,black"
        instance1.sayName(); //"flyer";
        instance1.sayAge(); //29


        var instance2 = new SubType("bing", 27);
        alert(instance2.colors); //"red,blue,green"
        instance2.sayName(); //"bing";
        instance2.sayAge(); //27
       
        
    </script>
</head>
<body>

</body>
</html>

 

分享到:
评论

相关推荐

    JavaScript寄生组合式继承实例详解

    本文实例讲述了JavaScript寄生组合式继承。分享给大家供大家参考,具体如下: 其实《JavaScript高级程序设计》这本书中已经有完整代码了,只要把代码读懂就知道这个继承是怎么回事。 首先,在js中,给对象定义属性有...

    浅谈JS继承_寄生式继承 & 寄生组合式继承

    下面小编就为大家带来一篇浅谈JS继承_寄生式继承 & 寄生组合式继承。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)

    主要介绍了JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承,需要的朋友可以参考下

    JavaScript寄生组合式继承原理与用法分析

    本文实例讲述了JavaScript寄生组合式继承。分享给大家供大家参考,具体如下: 寄生组合式继承 寄生组合式继承,就是通过伪造对象来继承属性,通过原型链的混成形式来继承方法。 这种技术的基本思路是:不必为了指...

    【JavaScript源代码】深入JS继承.docx

     目录 前言准备总结继承的n种方式原型式继承原型链式继承借用构造函数(类式继承)组合继承寄生组合式继承结束语 前言 准备 总结 继承的n种方式 原型式继承原型链式继承借用构造函数(类式继承)组合继承寄生组合...

    [js高手之路]寄生组合式继承的优势详解

    下面小编就为大家带来一篇[js高手之路]寄生组合式继承的优势详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    js实现的七种继承方式.md

    使用js实现继承的七种方式,详细讲解了js中的原型链继承,构造函数继承,组合继承(经典继承),原型式继承,寄生式继承,寄生组合式继承,以及ES6中的继承,描述原理以及实现和要点概述等。

    【JavaScript源代码】简单谈谈JavaScript寄生式组合继承.docx

    简单谈谈JavaScript寄生式组合继承  组合继承也被称为伪经典继承,它综合了我们昨天说的原型链和盗用构造函数,将俩者的有点结合在了一起。它的基本思想是使用原型链继承原型上的属性和方法,通过盗用构造函数继承...

    15分钟深入了解JS继承分类、原理与用法

    所以,下面所要说的原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承都属于实现继承。 最后的最后,我会解释 ES6 中的 extend 语法利用的是寄生组合式继承。 1. 原型链继承 ...

    js代码-JS的继承 1、原型继承 2、构造函数的继承 3、组合继承 4、原型式继承 5、寄生式继承 6、寄生式组合继承

    js代码-JS的继承 1、原型继承 2、构造函数的继承 3、组合继承 4、原型式继承 5、寄生式继承 6、寄生式组合继承

    wenfujie#document-library#原型以及原型链1

    使用构造函数创建对象原型小结原型链js中继承的几种方法原型链继承借用构造函数继承组合继承原型式继承寄生式继承(常用)寄生组合式继承使用构造函数创建对象var p

    JS 面向对象之继承—多种组合继承详解

    这一次要讲 组合、原型式、寄生式、寄生组合式继承方式。 1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式。 下面来看一个例子: function SuperType(name) { this.name =...

    js继承

    js继承原型链(很少单独使用)原型链的问题借用构造函数(很少单独使用)组合继承(最常用的继承模式)原型式继承寄生式继承寄生组合式继承(引用类型最理想的继承范式) 原型链(很少单独使用) function SuperType...

    javascript 中的继承实例详解

    寄生组合式继承 后记 继承有两种方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际的方法。 由于函数没有签名,在ECMAScript中无法实现接口继承。ECMAScript只支持实现继承,而且实现继承...

Global site tag (gtag.js) - Google Analytics