ES6.Class

编程语言，都有关于类的定义和使用，java，C#，C++。使用class的关键字，js之前的版本，没有用。保留字，ES6启用了该关键字。

一.传统方法

通过构造函数定义，并生成对象。

 //定义传统的类，js之前的写法function Person(name,salary) {this.name=name;this.salary=salary;}//定义它的方法Person.prototype.toString=function () {return this.name+","+this.salary;}//如何来获取let p1=new Person('张晨光',90000);console.log(p1.toString());//这时候，用的是function来定义一个类。

和传统面向对象语言，写法差别很大，很难受。

接下来，看看ES6是如何写的呢？

二.ES6类的定义：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//使用ES6来定义类,启用了之前的保留字classclass Person{//构造方法constructor(name,salary){this.name=name;this.salary=salary;}//其他方法toString(){return `${this.name}，${this.salary}`;}}//使用该类let p2=new Person('张晨光老师',100000);console.log(p2.toString());//这种方式，看起来就是面向对象，ES6更加面向对象;console.log(typeof(Person));  //输出的是一个function//证明ES6，class对应了之前的functionlet result=(Person===Person.prototype.constructor);console.log(result);//证明类本身指向了构造方法.</script>
</head>
<body></body>
</html>

三.静态方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//class Person{}const Person=class{constructor(name,salary){this.name=name;this.salary=salary;}//自定义方法showName(){return `姓名:${this.name}`;}showSalary(){return `工资：${this.salary}`;}//静态方法static isFee(salary){if(salary<5000)return '不用交税';}}  //类定义的结束//调用之let p3=new Person('张晨光',4500);console.log(p3.showName());console.log(p3.showSalary());//调用类的静态方法;类名.静态方法console.log(Person.isFee(4500));</script>
</head>
<body></body>
</html>

使用静态方法的时候，语法

static 方法名(参数){}

调用的时候：类名.方法名()

四.继承

基本语法

子类 extends 父类，在之前ES5通过修改原型链模式实现。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//人的定义class Person{//构造方法的定义constructor(name,salary){this.name=name;this.salary=salary;}//自定义方法showName(){return `姓名:${this.name}`;}showSalary(){return `工资：${this.salary}`;}}//定义一个子类class YellowPerson extends  Person{//子类如果没有定义construtor,则该方法会默认添加上去，即任何子类都有constructor()//constructor(...args){ super(...args) }//这时候，子类需要针对父类进行加工处理constructor(name,salary,skin){super(name,salary);//super()使用，在子类构造方法最前面;this.skin=skin;  //}//子类增加一个自己的方法;showInfo(){//通过super.方法，来调用父类的方法return super.showName()+","+super.showSalary()+",肤色："+this.skin;}}//调用之;let yp=new YellowPerson('张晨光',8888,'青铜色');//测试实例;//console.log(yp instanceof YellowPerson);  //yp是不是子类的实例//console.log(yp instanceof Person);  //yp是不是父类的实例console.log(yp.showInfo());</script>
</head>
<body></body>
</html>

总结：

1.ES6类定义的语法，使用class 类名{

//构造方法

//自定义方法

}

2.ES6 静态方法的定义和使用

3.ES6 子类继承父类的语法和使用

ES6前端就业课第三课之class相关推荐

商务汇报PPT制作的七堂课-第三课：结构搭建
结构是我们PPT中最核心的部分,我们说ppt的缩写是PowerPoint,那意思是什么?是让观点更有力量,观点更有力量的前提是首先让别人能听得懂,那结构就是解决让别人听得懂的问题. 搭建好结构,你结合 ...
前端React教程第三课数据是如何在 React 组件之间流动
04 数据是如何在 React 组件之间流动的?(上) 通过前面 3 个课时的学习,相信你已经对 React 生命周期相关的"Why""What"和" ...
0.0 目录-深度学习第三课《结构化机器学习项目》-Stanford吴恩达教授
文章目录第五课第四课第三课第二课第一课第五课 <序列模型> 笔记列表 Week 1 循环序列模型 Week 1 传送门 -> 1.1 为什么选择序列模型 1.2 数学符号 ...
【前端就业课第一阶段】HTML5 零基础到实战（六）表格详解
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面. 参加博主前端 ...
矩阵理论及其应用_有限元分析ansys理论与应用视频第三课绪论：直接法矩阵求解...
我们拒绝关注获取资源的行为, 我们拒绝分享文章获取资源的行为, 我们拒绝收费获取资源的行为, 我们拒绝一切套路. 是否关注是大家的自由, 我们只为努力分享机械行业资源, 让更多的学习者受益. 本期视频 ...
第三课 go语言改到php仿优酷-阿里云视频上传功能
第三课 go语言改到php仿优酷-阿里云视频上传功能 tags: Beego 慕课网 categories: go环境安装 Beego框架阿里云视频点播服务文章目录第三课 go语言改到php仿 ...
计算机专业课的核心素养是什么,【素养课】计算机就业专业部职业素养课方案成功敲定，阶段核心素养课在一、二年级班顺利展开...
原标题:[素养课]计算机就业专业部职业素养课方案成功敲定,阶段核心素养课在一.二年级班顺利展开随着信息技术的不断发展,计算机专业的学生有了更加广阔的就业.创业空间,而对于现代企业来说,需要的人才越来 ...
第三课.运算符与表达式
第三课目录运算符与表达式算术运算符关系运算符逻辑运算符德摩根律使用断言assert 位运算符补码补码与位运算赋值运算符杂项运算符运算符与表达式数学是科技发展的基础,数学公式的意 ...
第三课.Linux代码编辑器
第三课目录 vi/vim vi/vim简介 vi的模式 vi在命令模式下的操作 vi在底线命令模式下的操作 Visual Studio Code Git git简介关于git的故事 git的使用 v ...

ES6前端就业课第三课之class