我们知道,ES6中,引入了class这个关键字,让在JavaScript中定义类更加简单了

在介绍ES6中的class之前,我们先来看一下JavaScript之前类的实现,在此之前,JavaScript基本是使用原型prototype来实现类的

现在ES6中有了新的class关键字,我们来看看使用class关键字如何来写这个代码

我们可以看到以下几点区别

1. 使用了class关键字,和c#中使用方法类似,便于个人理解了

2. class中有了构造函数,构造函数使用constructor关键字来进行

3. 在class中定义了hello方法,直接采用hello()的写法,没有使用function关键字。也就是说,在class中定义方法,不再需要使用function关键字了

好了,定义了class之后,我们想创建一个这个class(employee)的对象,代码就和c#中很类似了

好了,我们知道了怎么使用ES6中的class关键字来创建一个类,如何来创建这个类的一个对象。 那么如何来实现它的继承呢,我们来看一下

这里,我们可以看到一点

1. 使用extends关键字来实现继承, 它的构造函数constructor中,使用了super关键字来来实现它的父类的构造函数

那么,我们可能会想,如果这个类不单单要实现父类的构造函数, 在自己的构造函数中,也想传入自己特有的参数。我们知道,这种情况在程序代码中是经常出现的,我们来看看

这里,我们可以看到

1. 子类KeyEmployee也是用class关键字来实现,通过extends关键字来实现继承

2. 子类的构造函数同样需要constructor关键字,它可以和父类一样(比如和父类一样,只有name一个参数,通过super(name)来调用父类的构造函数),也可以和父类不一样(比如有name和level两个参数)。 但无论是否 一样,它都需要通过super()来实现父类的构造函数

3. 子类会自动获得父类中的方法,也就是说 KeyEmployee自动有了Employee中的hello()方法

JavaScript-ES6中的class及继承的更多相关文章

  1. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  2. JavaScript ES6中export及export default的区别

    相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...

  3. JavaScript ES6中export及export default的区别以及import的用法

    本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632,未经博主允许不得转载. 相信很多人都使用过export.e ...

  4. JavaScript ES6中,export与export default

    自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...

  5. JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...

  6. ES6中。类与继承的方法,以及与ES5中的方法的对比

    // 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...

  7. 现代JavaScript—ES6+中的Imports,Exports,Let,Const和Promise

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.freecodecamp.org/news/learn-modern-jav ...

  8. 彻底理解JavaScript ES6中的import和export

    0.前言 前端工程,在最早的时候是没有模块的概念的.随着前端工程的发展,前端开发也越来越规范化,更像是软件工程了.那么随之而来的,为了解决工程化的问题,就引入了模块的概念.但是在早期,因为ecmasc ...

  9. JavaScript、ES6中的类的继承

    类的继承 extends  connstructor  super 例1: class Father { constructor(){} money(){ console.log("1000 ...

  10. ES6中的类和继承

    class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子     function Point(x, y) {  this.x = x;  this. ...

随机推荐

  1. JSONP原理及实现跨域方式

    今天做页面时,后台给了个接口:https://a.a.com/a/a.json,我页面的上线地址是:http://b.b.com.显而易见,因为浏览器同源策略的限制,通过ajax无法无法取得json的 ...

  2. mysql之 percona-xtrabackup 2.4.7安装(热备工具)

    准备:os是centos6.7,提前下载并上传 percona-xtrabackup 安装包,下载网址为: https://www.percona.com/downloads/XtraBackup/L ...

  3. asp.net给按钮添加删除确认

    if (!IsPostBack) { BtnDel.Attributes["onclick"] = "javascript:return window.confirm(' ...

  4. Azure ARM模式下VNet配置中需要注意的几点事项

    虚拟网络的配置是所有公有云中非常重要的环节.把虚拟网络配置好,对整个系统的管理.维护,以及安全性都非常重要. 本文将介绍Azure在ARM模式下VNet配置中需要特别注意的几点. 一 Azure的VN ...

  5. 详解NXP Cortex-M3加密设置

     加密芯片是对内部集成了各类对称与非对称算法,自身具有极高安全等级,可以保证内部储存的密钥和信息数据不被非法读取与篡改的一类安全芯片的通称.使用到安全加密芯片的产品:银行加密U盾.刻录机.加密硬盘.P ...

  6. 【SymmetricDS】SymmetricDS是如何工作的

    2018-04-20  by 安静的下雪天  http://www.cnblogs.com/quiet-snowy-day/p/8890785.html  本文翻译自SymmetricDS官方文档   ...

  7. LNMP 1.4 nginx启动脚本和配置文件

    编写Nginx启动脚本,写入下面这段,授权755 vim /etc/init.d/nginx #!/bin/bash # chkconfig: - # description: http servic ...

  8. Excel向数据库插入数据和数据库向Excel导出数据

    为了熟悉java里工作簿的相关知识点,所以找了“Excel向数据库插入数据和数据库向Excel导出数据”的功能来实现. 注意事项:1,mysql数据库: 2,需要导入的jar包有 jxl.jar,my ...

  9. Tiny4412 Uboot

    1. Build uboot a) 安装好toolchain (arm-linux-gcc-4.5.1-v6-vfp-20120301.tgz)并设置好 环境变量PATH,保证可以正常使用. b) 解 ...

  10. python爬虫(7)--Beautiful Soup的用法

    1.Beautiful Soup简介 简单来说,Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据. Beautiful Soup提供一些简单的.python式的函数用来 ...