寄生组合式继承

最新推荐文章于 2024-09-25 14:00:00 发布

stabird

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量87

点赞数

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/stabird/article/details/84552265

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>