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实现继承。

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • python判断是否为数字类型_python判断字符串是否为数字

    python判断是否为数字类型_python判断字符串是否为数字以下实例通过创建自定义函数is_number()方法来判断字符串是否为数字:#-*-coding:UTF-8-*-#Filename:test.py#authorby:www.runoob.comdefis_number(s):try:float(s)returnTrueexceptValueError:passtry:importunicodedataunico…

    2022年10月25日
  • 教你PSD文件如何预览(支持32以及64位win7系统)

    教你PSD文件如何预览(支持32以及64位win7系统)相信随着软矿发出关于AdobeCS6的系列文章,很多矿友们已经按捺不住都早早的安装上了吧!但是笔者安装之后发现之前安装的PhotoshopCS5所具有的PSD文件预览功能消失了,相当郁闷的说~所以苦寻很多方法之后终于找到了消失的PSD文件预览功能。NO.1下载右侧链接的压缩包文件:点我下载下载完成后解压缩至任意目录,压缩包内容如下图所示然后将对应系统的MysticThum…

  • 了解HashMap数据结构,超详细!

    了解HashMap数据结构,超详细!写在前面:小伙伴儿们,大家好!今天来学习HashMap相关内容,作为面试必问的知识点,来深入了解一波!思维导图:学习框架图1,HashMap集合简介HashMap基于哈希表的Map接口实现,是以key-value存储形式存在,即主要用来存放键值对。HashMap的实现不是同步的,这意味着它不是线程安全的。它的key、value都可以为null。此外,HashMap中的映射不是有序的。JDK1.8之前的HashMap由数组+链表组成的,数组是HashMap的主体,链表则是主要为

  • 灵动标签的使用方法 ecms通过运行sql获取须要的记录

    灵动标签的使用方法 ecms通过运行sql获取须要的记录

  • OnContextMenu事件

    OnContextMenu事件用oncontextmenu事件单禁用右键菜单 一个页面中,BODY中用oncontextmenu='returnfalse'来取消鼠标右键;在JS中设置oncontext

  • 百度地图api文档_奥维互动地图使用教程

    百度地图api文档_奥维互动地图使用教程新版百度地图API增加了发布版SHA1,开发版SHA1按官方教程操作即可,这里介绍一下发布版SHA1的获取方法。为apk签名,生成keystore文件(如果已经有keystore文件,跳过此步骤)打开cmd,定位文件夹到.andorid下,默认路径是users/用户名/.android输入keytool-list-v-keystore*.jks,*.jks为keystor

发表回复

您的电子邮箱地址不会被公开。

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