美文网首页网页前端开发学习必备教程
如何理解JavaScript的几种原型继承?

如何理解JavaScript的几种原型继承?

作者: WEB开发李家靖 | 来源:发表于2019-03-26 20:01 被阅读5次

    在前面的内容中,给大家讲解了JavaScript中的原型是什么,但是其实JavaScript的原型最好的用法就是运用在面向对象编程的继承中。

    今天就来只给大家讲一下,几种常用的原型继承运用方法,也方便大家理解记忆。看完可以点个收藏,时刻复习。

    原型继承


    原型继承:每一个构造函数都有prototype原型属性,通过构造函数创建出来的对象都继承自该原型属性。所以可以通过更改构造函数的原型属性来实现继承。

    在JavaScript中,继承的方式有多种,可以一个对象继承另一个对象,也可以通过原型继承的方式进行继承。

    给大家演示讲解一下几种继承方式。

    1、简单混入继承

    直接遍历一个对象,将所有的属性和方法加到另一对象上。

    缺点:只能一个对象继承自另一个对象,代码复用太低了。

    2、混入式原型继承

    混入式原型继承其实与上面的方法类似,只不过是将遍历的对象添加到构造函数的原型上。

    面向对象思想封装一个原型继承

    我们可以利用面向对象的思想,将面向过程进行封装。

    3、替换式原型继承

    替换式原型继承,在上面已经举过例子了,其实就是将一个构造函数的原型对象替换成另一个对象。

    之前我们就说过,这样做会产生一个问题,就是替换的对象会重新开辟一个新的空间。

    替换式原型继承时的bug

    替换原型对象的方式会导致原型的constructor的丢失,constructor属性是默认原型对象指向构造函数的,就算是替换了默认原型对象,这个属性依旧是默认原型对象指向构造函数的,所以新的原型对象是没有这个属性的。

    解决方法:手动关联一个constructor属性

    4、Object.create()方法实现原型继承

    当我们想把对象1作为对象2的原型的时候,就可以实现对象2继承对象1。前面我们了解了一个属性:__proto__,实例出来的对象可以通过这个属性访问到它的原型,但是这个属性只适合开发调试时使用,并不能直接去替换原型对象。所以这里介绍一个新的方法:Object.create()。

    语法:

    var obj1 = Object.create(原型对象);

    示例代码: 让空对象obj1继承对象obj的属性和方法

    兼容性:

    由于这个属性是ECMAScript5的时候提出来的,所以存在兼容性问题。

    利用浏览器的能力检测,如果存在Object.create则使用,如果不存在的话,就创建构造函数来实现原型继承。

    好了,今天的讲解就到这里,看完点个好看支持一下吧。

    相关文章

      网友评论

        本文标题:如何理解JavaScript的几种原型继承?

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