ES5和ES6继承的区别「建议收藏」

ES5和ES6继承的区别「建议收藏」前端面试题之JSES5和ES6继承的区别ES5的继承方法可以看这篇:https://mp.csdn.net/mdeditor/83098432#ES5与ES6的继承方法对照:ES5functionParent(){this.name=’parent’;this.arr=[1,2,3,4];}Parent.prototype.say=functio…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

ES5的继承方法可以看这篇:
https://blog.csdn.net/qq593249106/article/details/83098432

ES5与ES6的继承方法对照:

ES5

function Parent() { 
   
    this.name = 'parent';
    this.arr = [1,2,3,4];
}
Parent.prototype.say = function () { 
   
    console.log('say');
};
function Child(age) { 
   
    Parent.call(this);
    this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var c = new Child(12);
console.log(c.name); //输出parent
c.say(); //输出say
console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

Jetbrains全家桶1年46,售后保障稳定

ES6

class Parent2 { 
   
    constructor() { 
   
        this.name = 'parent';
    }
}
Parent2.prototype.say = function () { 
   
    console.log('say');
};
class Child2 extends Parent { 
   
    constructor(age) { 
   
        super();
        this.age = age;
    }
}
var c2 = new Child2(12);
console.log(c2.name); //输出parent
c2.say(); //输出say
console.log(c.constructor); //输出function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); //输出Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

ES5的继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上(Parent.apply(this)),然后再把原型链继承。

ES6的继承机制完全不同,实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法,才可使用this关键字,否则报错。),然后再用子类的构造函数修改this实现继承。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/230919.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • TCP的三次握手与四次挥手理解及面试题(很全面)

    TCP的三次握手与四次挥手理解及面试题(很全面)本文经过借鉴书籍资料、他人博客总结出的知识点,欢迎提问序列号seq:占4个字节,用来标记数据段的顺序,TCP把连接中发送的所有数据字节都编上一个序号,第一个字节的编号由本地随机产生;给字节编上序号后,就给每一个报文段指派一个序号;序列号seq就是这个报文段中的第一个字节的数据编号。确认号ack:占4个字节,期待收到对方下一个报文段的第一个数据字节的序号;序列号表示报文…

    2022年5月5日
  • eclipse导入maven工程报错解决方法记录「建议收藏」

    eclipse导入maven工程报错解决方法记录「建议收藏」http://www.cnblogs.com/hongwz/p/5456578.html

    2022年5月6日
  • 安卓chrome 扫描二维码_付款扫的是条形码还是二维码

    安卓chrome 扫描二维码_付款扫的是条形码还是二维码了解二维码这个东西还是从微信中,当时微信推出二维码扫描功能,自己感觉挺新颖的,从一张图片中扫一下竟然能直接加好友,不可思议啊,那时候还不了解二维码,呵呵,然后做项目的时候,老板说要加上二维码扫描功能,然后自己的屁颠屁颠的去百度,google啥的,发现很多朋友都有介绍二维码扫描的功能,然后我就跟着人家的介绍自己搞起了二维码扫描功能,跟着人家的帖子,很快我的项目就加入了扫描二维码的功能,然后自己还很开

    2022年10月22日
  • 数据库ER图该怎么画

    数据库ER图该怎么画什么是ER图实体关系图,通过一张ER图,能够快速的了解数据库层面的表结构设计。目前做企业级应用系统,花费了大量的时间在数据库表结构的设计上,所以打算从源头梳理一下怎么样才能画好ER图,画好图是第一步,在这个过程中怎么样做好设计,然后来保证业务系统的功能实现以及扩展性的要求。 ER图的核心要素是什么实体:客观存在并可以相互区别的事物属性:实体所具有的一个属性关系:实…

    2022年6月21日
  • 织梦CMS系统中power by dedecms怎么去掉?power by dedecms什么意思?

    织梦CMS系统中power by dedecms怎么去掉?power by dedecms什么意思?织梦CMS近期的新版本至2013-6-7更新包以来,不管新版还是旧版更新补丁包,更新后网站页底都会出现powerbydedecms。powerbydedecms什么意思呢,那powerbydedecms怎么去掉呢,请大家看以下方法:一、powerbydedecms什么意思在我们上网的时候,会见到页面页底很多带powerbydedecms的网站,powerbyded…

    2022年7月13日
  • Reaver无线破解工具——穷举PIN码破解简析

    Reaver无线破解工具——穷举PIN码破解简析部分老版路由器有WPS或叫QSS功能,并且在默认开启状态时,可使用此工具。PIN码共为8位,按431分段,总共穷举有11000种组合。通过获取到PIN码,并记住Bssid和PIN,后期可以通过一条命令爆出无线密码。容易碰到的问题:连接超时,卡住,路由自保护等。reave的进度表文件保存在/usr/local/etc/reaver/MAC地址.wpc或/etc/reaver/MAC…

    2022年6月1日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号