简单谈谈JavaScript寄生式组合继承

 更新时间:2021年08月09日 14:44:10   作者:大熊G  
寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下

组合继承

组合继承也被称为伪经典继承,它综合了我们昨天说的原型链和盗用构造函数,将俩者的有点结合在了一起。它的基本思想是使用原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性,这样的好处就是可以把方法定义在原型上复用,每个实例又有自己的属性。

    function SuperType (name) {
        this.name = name;
        this.colors = ["red","yellow","bule"];
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name)
    }
    function SubType(name,age){
        SuperType.call(this,name);
        this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    let instancel = new SubType("jackson",22);
    instancel.colors.push("pink");
    instancel.sayName(); // "jackson"
    instancel.sayAge();//22
    console.log(instancel.colors);// ["red", "yellow", "bule", "pink"]
    
    let instance2 = new SubType("bear", 20);
    console.log(instance2.colors); // ["red", "yellow", "bule"]
    instance2.sayName(); // "bear";
    instance2.sayAge(); // 20

上面的代码大家有没有一种豁然开朗的感觉,SubType调用SuperType,并且传入name,然后定义自己的属性age,此外SubType.prototype也被赋值位SuperType实例。原型赋值后又在这个原型上添加sayage方法,这样创建俩个subType实例,这俩个实例都有自己属性,还可以共享相同的方法。

组合继承弥补了原型链和盗用构造函数的不足,是js中使用最多的继承模式。

寄生式继承

寄生式继承就是用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

  // 寄生式继承
    function subobject(obj) {
        let clone = Object(obj);
        clone.sayName = function(){
            console.log("jackson")
        };
        return clone;
    }
    let sub = {
        name:"bear"
    }
    let sup = subobject(sub);
    sup.sayName();//jackson

这个例子基于sub对象返回一个新对象,返回的sup对象有sub的属性和方法,还有一个新方法sayName()。

寄生式继承同样适合主要关注对象,而不在乎类型和构造函数的场景。object()函数不是寄生式继承所必需的,任何返回新对象的函数都可以在这里使用。

注意 通过寄生式继承给对象添加函数会导致函数难以重用,与构造函数模式类似。

寄生式组合继承

组合继承存在这一定的效率问题,它的父类构造函数始终会被调用俩次,一次在创建字类原型时调用,另一次在子类构造函数中调用。本质上子类只需要在执行时重写自己的原型就行了。

     function inheritPrototype(subType, superType) {
        let prototype = Object(superType.prototype); // 创建对象
        prototype.constructor = subType; // 增强对象
        subType.prototype = prototype; // 赋值对象
    }

这个 inheritPrototype()函数实现了寄生式组合继承的核心逻辑。这个函数接收两个参数:子类构造函数和父类构造函数。在这个函数内部,第一步是创建父类原型的一个副本。然后,给返回的 prototype 对象设置 constructor 属性,解决由于重写原型导致默认 constructor 丢失的问题。最后将新创建的对象赋值给子类型的原型。如下例所示,调用 inheritPrototype()就可以实现前面例子中的子类型原型赋值:

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

    function SubType(name, age) {
        SuperType.call(this, name);
        this.age = age;
    }
    inheritPrototype(SubType, SuperType);
    SubType.prototype.sayAge = function () {
        console.log(this.age);
    };

这里只调用了一次 SuperType 构造函数,避免了 SubType.prototype 上不必要也用不到的属性, 因此可以说这个例子的效率更高。而且原型链仍然保持不变。

总结

到此这篇关于JavaScript寄生式组合继承的文章就介绍到这了,更多相关JS寄生式组合继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Bootstrap模仿起筷首页效果

    Bootstrap模仿起筷首页效果

    这篇文章主要为大家详细介绍了Bootstrap模仿起筷首页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 如何解决js函数防抖、节流出现的问题

    如何解决js函数防抖、节流出现的问题

    这篇文章主要介绍了如何解决js函数防抖、节流出现的问题。SyntheticEvent对象是通过合并得到的。 这意味着在事件回调被调用后,SyntheticEvent 对象将被重用并且所有属性都将被取消。 因此,您无法以异步方式访问该事件。,需要的朋友可以参考下
    2019-06-06
  • JavaScript常用标签和方法总结

    JavaScript常用标签和方法总结

    JavaScript可以被浏览器直接解释执行,它可以更好得减小服务器压力,提高程序运行效率,下面小编通过本篇文章给大家分享JavaScript常用标签和方法,需要的朋友一起来学习吧
    2015-09-09
  • 最常用的12种设计模式小结

    最常用的12种设计模式小结

    最常用的12种设计模式小结,学习js的朋友可以参考下。
    2011-08-08
  • js实现磁性吸附的示例

    js实现磁性吸附的示例

    这篇文章主要介绍了js实现磁性吸附的示例,帮助大家更好的制作js特效,美化自己的网页,感兴趣的朋友可以了解下
    2020-10-10
  • 用于table内容排序

    用于table内容排序

    用于table内容排序...
    2006-07-07
  • JS中的JSON对象的定义和取值实现代码

    JS中的JSON对象的定义和取值实现代码

    这篇文章主要介绍了JS中的JSON对象的定义和取值实现代码,也是json的入门知识,需要的朋友可以参考下
    2018-05-05
  • Javascript 继承机制的实现

    Javascript 继承机制的实现

    要用ECMAScript实现继承机制,首先从基类入手。所有开发者定义的类都可作为基类。出于安全原因,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击。
    2009-08-08
  • 一道关于JavaScript变量作用域的面试题

    一道关于JavaScript变量作用域的面试题

    这篇文章主要为大家介绍了一道关于JavaScript变量作用域的面试题,如何解决这道面试题,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 微信小程序自定义地址组件

    微信小程序自定义地址组件

    这篇文章主要为大家详细介绍了微信小程序自定义地址组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论