js 寄生组合式继承个人理解

看了两天的寄生组合式继承,没有js基础就来看这些理解起来还是有点慢啊。说一点我这两天的心得

要理解寄生组合式继承,需要先了解“__proto__、prototype和constructor”这三个之间的关系和各自的作用,详细的可以看这篇文章,我觉得写得很详细还配了图。

我自己的理解是这样的:

  1. __proto__和constructor是对象拥有的属性,因为函数也可以看做是对象,所以函数也有这两个属性
  2. prototype原型是函数所独有的属性,
  3. __proto__是由来体现继承关系的属性,查找的属性在当前对象中没有时,就会到__proto__中查找
  4. constructor是构造函数,一个对象指向一个函数
  5. prototype叫做原型对象
  6. 对象.__proto__==函数.prototype
  7. 函数.prototype.constructor == 函数本身

理解了上面三者都是什么和互相之间的关系后,就可以着手了解继承。各种继承方式可以看这篇文章

    function inheritPrototype(subType, superType) {
        var prototype = Object.create(superType.prototype); // 创建对象,创建父类原型的一个副本
        prototype.constructor = subType;                    // 增强对象,弥补因重写原型而失去的默认的constructor 属性
        subType.prototype = prototype;                      // 指定对象,将新创建的对象赋值给子类的原型
    }

    // 父类初始化实例属性和原型属性
    function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function () {
        alert(this.name);
    };
    SuperType.prototype.nickName = 'zyk';

    // 借用构造函数传递增强子类实例属性(支持传参和避免篡改)
    function SubType(name, age) {
        SuperType.call(this, name);
        this.age = age;
    }

    // 将父类原型指向子类
    inheritPrototype(SubType, SuperType);

    // 新增子类原型属性
    SubType.prototype.sayAge = function () {
        alert(this.age);
    }

    var instance1 = new SubType("xyc", 23);
    var instance2 = new SubType("lxy", 23);

    instance1.colors.push("2"); // ["red", "blue", "green", "2"]
    instance2.colors.push("3"); // ["red", "blue", "green", "3"]

说一下我看文章中寄生组合式继承方式的理解:

  1. 寄生指得是子类的原型是以父类的一个实体为框架,构造函数为自身;组合式指的是子构造函数中调用父构造函数
  2. 创建一个新的类型的对象,需要原型对象、构造函数。
  3. Object.create()方法创建一个只有“__proto__”属性的新对象,使用现有的对象来提供新创建的对象的__proto__。就是给原来的父构造器外又封了一层,用来继承原型中的属性和方法                                                 
  4. 不会发生篡改,篡改是指对当前对象的某一个属性修改时,其他对象的响应属性会发生改变。因为在构造器里引用了父构造器,所以父构造器的属性是添加在子实体类中,每个实体单独有一份。
  5. call()方法类似于,java中的"this.super()"

最后加一个我自己花的理解图

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值