码迷,mamicode.com
首页 > 其他好文 > 详细

对象继承——组合继承

时间:2018-05-21 19:52:53      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:class   nbsp   UNC   共享   赋值   var   reg   通过   style   

组合继承,即组合构造函数继承和原型链继承方式,使用构造函数继承方式继承实例属性,即非共享属性;使用原型链继承方式继承共享的属性和方法。

 

<script>
    /**父类型构造函数,定义实例属性**/
    function SuperType(name) {
        /**必须添加this关键字,因为下面子类型继承是通过call方法,在子类型的作用范围调用父类构造函数的,如果不指定this
          *关键字,则不能被子类型继承,并且会报×× is not defined 的错误
         **/
        this.name = name;
        this.colors = ["red", "blue", "green"];
        this.show = function(){
            console.log("colors:" + this.colors);
        }
    }
    /**父类型原型对象中的方法**/
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    /**子类型构造函数**/
    function SubType(name,age) {
        SuperType.call(this,name);//构造函数,继承父类型中的属性,并且不与其他类型共享
        this.age = age;//自己新创建的实例属性
    }
    /**将父类型的实例赋值给子类型的原型对象,父类型实例中的两个实例属性此时会变成子类型的原型对象,但是因为子类型的构
      *造函数内部调用了父类型的构造函数,所以子类型中也有自己的实例属性了,也即,子类型中有两组name和colors,一组是自
      *父类型实例中的属性,作为子类型的原型属性;一组是子类型通过调用父类型构造函数定义的自己的实例属性
     **/
    SubType.prototype = new SuperType();
    
    /**在子类型中定义共享方法**/
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    
    
    var ins1 = new SubType("Nicholars",29);
    ins1.colors.push("black");
    console.log(ins1.colors);//["red", "blue", "green", "black"]
    ins1.sayName();//Nicholars
    ins1.sayAge();//29
    ins1.show();//colors:red,blue,green,black
    delete ins1.colors;//删除掉了子类型实例中的实例属性,则原型中的原型属性就会发挥作用
    console.log(ins1.colors);//["red", "blue", "green"]
    
    
    var ins2 = new SubType("Greg",27);
    console.log(ins2.colors);//["red", "blue", "green"]
    ins2.sayName();//Greg
    ins2.sayAge();//27
    ins2.show();//colors:red,blue,green
    
    console.log(ins1.sayName == ins2.sayName);//首先,在各自内部查找实例方法,没有,找原型方法,还是没有,去父类找原型方法
    
    
</script>

 

对象继承——组合继承

标签:class   nbsp   UNC   共享   赋值   var   reg   通过   style   

原文地址:https://www.cnblogs.com/qingyaxuan/p/9068494.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!