JS中的继承(下)

作者: noahlam | 来源:发表于2018-05-04 17:59 被阅读1次

在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容,
是建立在此基础上的.另外本文作为我个人的读书笔记,才疏学浅,如有错误,敬请指正.

接下来我们要介绍另外3种相对比较奇葩的继承

一. 原型式继承

function clone (proto) {
    function F () {}
    F.prototype = proto
    return new F()
}

clone 内部首先是创建了一个空的构造函数F,然后把F的prototype指向参数proto,最后返回一个F的实例对象,完成继承.
原型式继承看起来跟原型继承很像,事实上,两者因为都是基于prototype继承的,所以也有一些相同的特性,比如引用属性共享问题,
原型式继承原型继承有什么区别呢? 一个比较明显的区别就是clone函数接收的参数不一定要是构造函数,也可以是其他任何对象,
这样我们就相当于是浅复制了一个对象.

es5的Object.create()函数,就是基于原型式继承的

原型式继承是道格拉斯-克罗克福德 2006 年在 Prototypal Inheritance in JavaScript一文中提出的

二. 寄生式继承

寄生式继承其实就是在原型式继承的基础上,做了一些增强.

function cloneAndStrengthen(proto){
    function F () {}
    F.prototype = proto
    let f = new F()
    f.say = function() { 
        console.log('I am a person')
    }
    return f
}

我们看到上面的代码,跟原型式继承比,差别就是:在实例对象f返回之前,给f添加了一个say函数.
但是这样在实例对象上添加的引用属性(比如函数),跟构造函数模式一样,
实例对象的引用类型属性无法共享,尽管这既是缺点也是优点.

三. 寄生组合式继承
上一篇我们提到的组合继承其实也有个缺点,就是父类构造函数里面的代码会执行2遍,第一遍是在原型继承的时候实例化父类,
第二遍是在子类的构造函数里面借用父类的构造函数,我们可以用寄生组合式继承来解决这个问题

function inherit(sub, super){
    let prototype = clone(super.prototype)
    prototype.constructor = sub    
    sub.prototype = prototype      
}

这样我们就实现了一个寄生组合式继承的函数inherit,接下来我们来使用一下:

function Person(name){}

function Student(){
    SuperType.call(this)
}

inherit(Student, Student)

我们用 inherit 函数替换了 Student.prototype = new Person(),从而避免了执行 new Person().

书上说: 寄生组合式继承是引用类型最理想的继承范式.

关于js的继承就介绍到这里,感谢收看,如果觉得本文对您有用,请给本文的github加个star,万分感谢,
另外,github上还有其他一些关于前端的教程和组件,有兴趣的童鞋可以看看,你们的支持就是我最大的动力。

相关文章

  • JS中的继承(下)

    在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • 梳理一下js中的继承

    天气太热了,懒得出去了,在家梳理一下js中的继承,其实js的继承主要是依靠原型链来实现的 1. 原型继承 1.代码...

  • JS中基于原型实现继承

    本文不会对于JS中的继承机制进行深入研究,只聊js中基于原型实现继承的方式,如果需要了解JS中的继承机制及其相关背...

  • ES5的继承和ES6的继承

    关于js中的继承,已经老生常谈了,本文将对js的继承做一个大概的总结. 首先我们可以看一下,es5继承关系图,理解...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • [读] JS中的call()和apply()方法

    JS中的call()和apply()方法 实现继承 多重继承

  • JS中的继承

    1. prototype实现继承 由于IE不支持Man.prototype.proto=Human.prototy...

  • js中的继承

    方式一、原型链继承 分析: 这种方式实现的本质是通过将子类的原型指向了父类的实例,子类的实例就可以通过proto访...

  • js中的继承

    要使一个子类继承父类,需要两步实现:第一:继承父类自身的属性和方法第二:继承父类原型上的方法 "父类自身"属性和方...

网友评论

    本文标题:JS中的继承(下)

    本文链接:https://www.haomeiwen.com/subject/epqjrftx.html