博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES5和ES6中的继承 图解
阅读量:4678 次
发布时间:2019-06-09

本文共 999 字,大约阅读时间需要 3 分钟。

Javascript中的继承一直是个比较麻烦的问题,prototype、constructor、__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固。ES6中又新增了class和extends,和ES5搅在一起,加上平时很少自己写继承,简直乱成一锅粥。不过还 好,画个图一下就清晰了,下面不说话了,直接上图,上代码。

ES5

ES5中的继承,看图:

1 function Super() {} 2   3 function Sub() {} 4 Sub.prototype = new Super(); 5 Sub.prototype.constructor = Sub; 6   7 var sub = new Sub(); 8   9 Sub.prototype.constructor === Sub; // ② true10 sub.constructor === Sub; // ④ true11 sub.__proto__ === Sub.prototype; // ⑤ true12 Sub.prototype.__proto__ == Super.prototype; // ⑦ true

ES5中这种最简单的继承,实质上就是将子类的原型设置为父类的实例。

 

ES6

ES6中的继承,看图:

1 class Super {} 2   3 class Sub extends Super {} 4   5 var sub = new Sub(); 6   7 Sub.prototype.constructor === Sub; // ② true 8 sub.constructor === Sub; // ④ true 9 sub.__proto__ === Sub.prototype; // ⑤ true10 Sub.__proto__ === Super; // ⑥ true11 Sub.prototype.__proto__ === Super.prototype; // ⑦ true

 

所以

ES6和ES5的继承是一模一样的,只是多了classextends ,ES6的子类和父类,子类原型和父类原型,通过__proto__ 连接。

转载于:https://www.cnblogs.com/wshiqtb/p/5603985.html

你可能感兴趣的文章
min-max 容斥
查看>>
2019-06-06 Java学习日记 day27 反射
查看>>
《大道至简》3
查看>>
黑马程序员——关于接口和抽象类
查看>>
【译】为迁移到Windows Azure制定规划
查看>>
面试题之求二叉树的深度
查看>>
struts2---访问WEB
查看>>
jQuery学习(三)
查看>>
[VJ]输出m/n,若是循环体只输出第一节
查看>>
【问题】background:url(imagePath)不能显示图片
查看>>
linux 安装mysql
查看>>
团队项目冲刺第五天
查看>>
Dubbo-Fail to decode request due to: RpcInvocation
查看>>
android笔记5——同一个Activity中Fragment的切换
查看>>
Pillow & OpenCV安装
查看>>
【3dsmax2016】安装图文教程、破解注册以及切换语言方法
查看>>
markdown
查看>>
WebService-01-使用jdk发布第一个WebService服务并调用
查看>>
mysql 关键字于数据库字段于关键字冲突的问题
查看>>
【bzoj2694】Lcm 莫比乌斯反演+线性筛
查看>>