JavaScript继承的几种方式

最新推荐文章于 2024-07-30 22:36:34 发布

SuperStonne

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量386

点赞数

分类专栏： JavaScript 文章标签： javascript js object

本文链接：https://blog.csdn.net/SuperStonne/article/details/46672839

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>
	<head>
    	<title>object-extend</title>
    	<script type="text/javascript">
        var instance1 = null;
        var instance2 = null;
        /*
        //1.extend from prototype chain, using this pattern there is a problem when there is a refrence type in the super object, all the son instances will share this refrence type attribute
        function SuperType(){
          this.property = true;
          this.colour = ['green','red'];
        }
        SuperType.prototype.getSuperValue = function(){
          return this.property;
        };
        function SubType(){
          this.subProperty = false;
        }
        SubType.prototype = new SuperType();
        SubType.prototype.getSubValue = function(){
          return this.subProperty;
        };
        instance1 = new SubType();
        alert(instance1.getSuperValue());
        alert(instance1.colour);
        instance2 = new SubType();
        alert(instance2.getSuperValue());
        alert(instance2.colour);
        instance1.colour.push('black');
        alert(instance1.colour);//green,red,black
        alert(instance2.colour);//green,red,black
        
        //2. constructor stealing, the son object can not call the method in parent's prototype's method and all the method should be define in the constructor that all the instance can not share the method, we will have a waste of memory
        function SuperType(){
          this.colour = ['red','black'];
          
        }
        SuperType.prototype.sayColour = function(){
            alert(this.colour);
          };
        function SubType(){
          SuperType.call(this);
        }
        instance1 = new SubType();
        alert(instance1.colour);
        instance2 = new SubType();
        alert(instance2.colour);
        instance1.colour.push('blue');
        alert(instance1.colour);//red,black,blue
        alert(instance2.colour);//red,black
        //instance1.sayColour(); //there will be an error
        alert(SubType.constructor);
        

        //3.conbination inheritance, everything goes well
        function SuperType(){
          this.name = 'super';
          this.colour = ['red','black'];
        }
        SuperType.prototype.sayColour = function(){
          alert(this.colour);
        };
        function SubType(){
          SuperType.call(this);
          this.age = 21;
        }
        SubType.prototype = new SuperType();
        SubType.prototype.sayAge = function(){
          alert(this.age);
        };

        instance1 = new SubType();
        instance1.sayColour();
        instance2 = new SubType();
        instance2.sayColour();
        instance1.colour.push('blue');
        instance1.sayColour();//red,black,blue
        instance2.sayColour();//red,black
        instance2.sayAge();//21
        */
        //4.parasitic combination, using this pattern we can just get the prototype and not to initial the other attribute
        function objct(o){
          function F(){};
          F.prototype = o;
          return new F();
        }
        function inheritPrototype(subType,superType){
          var prototype = objct(superType.prototype);
          prototype.constructor = subType;
          subType.prototype = prototype;
        }

        function SuperType(){
          this.name = 'super';
          this.colour = ['red','black'];
        }
        SuperType.prototype.sayColour = function(){
          alert(this.colour);
        };
        function SubType(){
          SuperType.call(this);
          this.age = 21;
        }
        inheritPrototype(SubType,SuperType);
        SubType.prototype.sayAge = function(){
          alert(this.age);
        };

        instance1 = new SubType();
        instance1.sayColour();
        instance2 = new SubType();
        instance2.sayColour();
        instance1.colour.push('blue');
        instance1.sayColour();//red,black,blue
        instance2.sayColour();//red,black
        instance2.sayAge();//21
    	</script>
	</head>
	<body>
    	
	</body>
</html>

SuperStonne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript继承的几种方式

object-extend var instance1 = null; var instance2 = null; /* //1.extend from prototype chain, using this pattern there is a problem when there is a refrence type
复制链接

扫一扫

专栏目录