JavaScript-ES6中的class及继承
我们知道,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及继承的更多相关文章
- 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理
理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...
- JavaScript ES6中export及export default的区别
相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...
- JavaScript ES6中export及export default的区别以及import的用法
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632,未经博主允许不得转载. 相信很多人都使用过export.e ...
- JavaScript ES6中,export与export default
自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...
- JavaScript ES6中export、import与export default的用法和区别
前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ...
- ES6中。类与继承的方法,以及与ES5中的方法的对比
// 在ES5中,通常使用构造函数方法去实现类与继承 // 创建父类 function Father(name, age){ this.name = name; this.age = age; } F ...
- 现代JavaScript—ES6+中的Imports,Exports,Let,Const和Promise
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://www.freecodecamp.org/news/learn-modern-jav ...
- 彻底理解JavaScript ES6中的import和export
0.前言 前端工程,在最早的时候是没有模块的概念的.随着前端工程的发展,前端开发也越来越规范化,更像是软件工程了.那么随之而来的,为了解决工程化的问题,就引入了模块的概念.但是在早期,因为ecmasc ...
- JavaScript、ES6中的类的继承
类的继承 extends connstructor super 例1: class Father { constructor(){} money(){ console.log("1000 ...
- ES6中的类和继承
class的写法及继承 JavaScript 语言中,生成实例对象的传统方法是通过构造函数.下面是一个例子 function Point(x, y) { this.x = x; this. ...
随机推荐
- js改变select的选中项不触发select的change事件
// test var selectEl = document.querySelector('select') var buttonEl = document.querySelector('butto ...
- main函数的参数的用法
说明:main函数的参数的用法源代码: #include <stdio.h>#include <stdlib.h>int main(int argc, char *argv[] ...
- mysql_union all 纵向合并建表_20170123
年前事情比较多,博客不能每天更新了. 1.union all 纵向建表和left join 横向建表的数据结构区别 先贴代码 后面再补充 (#销售确认额 SELECT '05收货销售额' AS 标识, ...
- 洛谷P2606 [ZJOI2010]排列计数
题目描述 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案可能很 ...
- ntp 配置 autokey 功能【摘录】
摘录于ntp官网:http://support.ntp.org/bin/view/Support/ConfiguringAutokey 6.7. Autokey Configuration for N ...
- BZOJ3110:[ZJOI2013]K大数查询(整体二分版)
浅谈离线分治算法:https://www.cnblogs.com/AKMer/p/10415556.html 题目传送门:https://lydsy.com/JudgeOnline/problem.p ...
- 六、Jmeter后置处理器JSON Extractor
一.当接口返回是JSON格式的时候,就可以用JSON Extractor来抓取返回的值,用来关联或者断言. 1.首先,到V2EX中找一个接口,地址为:https://www.v2ex.com/p/7v ...
- JSF中使用f:ajax标签无刷新页面改变数据
ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...
- 浅析TCP /UDP/ IP协议
互连网早期的时候,主机间的互连使用的是NCP协议.这种协议本身有很多缺陷,如:不能互连不同的主机,不能互连不同的操作系统,没有纠错功能.为了改善这种缺点,大牛弄出了TCP/IP协议.现在几乎所有的操作 ...
- leetcode398
public class Solution { int[] nums; Random rnd; public Solution(int[] nums) { this.nums = nums; this ...