ES6前端就业课第三课之class
【摘要】
ES6.Class
编程语言，都有关于类的定义和使用，java，C#，C++。使用class的关键字，js之前的版本，没有用。保留字，ES6启用了该关键字。
一.传统方法
通过构造函数定义，并生...
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来定义一个类。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
和传统面向对象语言，写法差别很大，很难受。
接下来，看看ES6是如何写的呢？
二.ES6类的定义：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//使用ES6来定义类,启用了之前的保留字class
class 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对应了之前的function
let result=(Person===Person.prototype.constructor);
console.log(result);
//证明类本身指向了构造方法.
</script>
</head>
<body>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
三.静态方法
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
使用静态方法的时候，语法
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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
总结：
1.ES6类定义的语法，使用class 类名{
//构造方法
//自定义方法
}
2.ES6 静态方法的定义和使用
3.ES6 子类继承父类的语法和使用
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/108914450
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）