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

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

hot3.png

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; // ② true
  10. sub.constructor === Sub; // ④ true
  11. sub.__proto__ === Sub.prototype; // ⑤ true
  12. 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; // ⑤ true
  10. Sub.__proto__ === Super; // ⑥ true
  11. Sub.prototype.__proto__ === Super.prototype; // ⑦ true

 

 

所以

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

转载于:https://my.oschina.net/jamesview/blog/815668

你可能感兴趣的文章
VC++ 限制窗口的大小范围的方法
查看>>
结对开发-返回一个整数数组中最大子数组的和(首尾相接版)
查看>>
meanshift-聚类
查看>>
不要if else的编程
查看>>
rn.ShowDialog() == DialogResult.OK
查看>>
20160519
查看>>
SCU 3132(博弈)
查看>>
正则表达式
查看>>
delete archivelog all 无法彻底删除归档日志?
查看>>
Redis五大数据类型
查看>>
大型分布式网站架构技术总结
查看>>
矩阵求导与投影梯度相关问题
查看>>
SVN
查看>>
C语言编程写的一个http下载程序(王德仙)2012-04-08
查看>>
CCF201409-3 字符串匹配(100分)
查看>>
UVALive2203 UVa10042 Smith Numbers【质因数分解+素数判定+数位之和】
查看>>
Project Euler Problem 9: Special Pythagorean triplet
查看>>
HDU5701 中位数计数【中位数】
查看>>
Python 深浅拷贝 (Shallow copy and Deep copy in Python)
查看>>
Axure
查看>>