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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • finalize方法_final与finalize区别

    finalize方法_final与finalize区别当对象没有引用指向时,虚拟机会按照一定的垃圾回收机制算法来调用finalize方法将该对象回收,并不是只要没有引用对象就会被回收。因此,可以调用System.gc()方法来主动调用垃圾回收机制,但也并不能保证一定能成功。在调用时,程序并不会阻塞在此处,而是会继续向下执行。默认的object类中的finalize方法是不作其余处理的。可以重写finalize方法来实现自己想要的资源释放操作,比如数据库连接等。…

    2022年9月19日
    0
  • 这几天收到了同学们提交的赛道设计图纸[通俗易懂]

     §01室外越野▲图1.1室外越野赛道▲图1.2室外越野赛道设计图纸 §02单车拉力▲图2.1单车拉力快车道 §03室内PVC赛道一、坡道1、背景布下的桥还有,这样的坡道比赛时可以用吗?本来是防止单车摔下来的。▲图3.1蓝布下的坡道回复:这是允许的。2、桥连着桥卓大大,这个可以么,桥接桥?▲图3.2连体桥回复:这是允许的。 §04相关问题一、环境改变卓大大好,,我们现在的场地上面

    2022年4月9日
    50
  • 台式电脑上网线插在哪里_计算机插了网线还是没有网络怎么办

    台式电脑上网线插在哪里_计算机插了网线还是没有网络怎么办问:电脑主机网线插在哪里?答:这个需要根据你家的上网情况来决定,主要是看有没有用到路由器上网,下面进行详细说明。1、如果你家里没有用路由器,那么电脑主机上的网线,需要插在猫的网口/LAN口。温馨提示:没有用路由器的情况下,电脑要上网的话,你需要打开电脑中的“宽带连接”程序,然后填写你家的宽带账号、宽带密码,就能连接上网了。如果你不知道如何用“宽带连接”程序拨号上网,可以点击阅读下面的文章,查看详…

    2022年4月19日
    166
  • montavuego_Vue.js+Flask+MongoDB

    montavuego_Vue.js+Flask+MongoDBMongoVUE是一个可以操作mongodb的图形化客户端,方面查看等使用; 一、下载MongoVUE(绿色激活成功教程版):http://download.csdn.net/detail/u011694549/5945519二、解压,打开文件夹:           三、启动MongoVUE.exe         四、建立连接,即可访问数据库了

    2022年8月21日
    3
  • java获取当前日期是周几_根据日期获取当前周

    java获取当前日期是周几_根据日期获取当前周1、使用Calendar类 /**    *获取当前日期是星期几    *     *@paramdt    *@return当前日期是星期几    */   publicstaticStringgetWeekOfDate(Datedt){       String[]weekDays={“星期日”,”星期一”,”星期

    2022年9月5日
    2
  • oracle函数的调用应使用execute命令_matlab函数调用

    oracle函数的调用应使用execute命令_matlab函数调用调用Oracle函数,返回游标.

    2022年9月5日
    2

发表回复

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

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