前言
在ES5中是原型函数，到了ES6中出现了"类"的概念。等同于是ES5的语法糖，大大提升了编写代码的速度，本文只讲一些常用的（其实也就那几个属性），下面就让我们来认识一下类吧
基本使用
定义类的关键字就是class，下面这样就是定义了一个类，跟我们ES5构造函数一样，都是使用new关键字
class Person {
}
const cateory = new Person() // 调用 类
类继承
在ES5中，我们要继承的话得使用call或者prototype来继承原型或者实例上的方法，但是在ES6中为我们提供了extends关键字直接使用就好，同样它会继承方法和属性
class Person {
name = "前端娱乐圈";
hello() {
return "你好"
}
}
class Scholl extends Person {
getName() {
return this.name;
}
}
const res = new Scholl();
console.log(res.getName()) // 前端娱乐圈
console.log(res.hello()) // 你好
注意： class类里面声明属性，全部挂载到当前实例里面，class类里面声明的方法，全部挂载到当前类的prototype
constructor
constructor构造函数，它就是当前实例的构造函数。每一个类里面只能存在一个constructor，当类实例化的时候（也就是new）constructor会立即执行。如果一个类里面没有显示定义constructor构造函数的话，会默认隐式被添加进类中并且返回值是当前类，当然也可以显示手动return返回其它引用值，这时当前的实例就是constructor的返回值。
// 默认不写
class Person {
}
console.log(new Person()) // 默认constructor指向自己的实例
// 显示写上constructor
class Person1 {
constructor() {
}
}
console.log(new Person1()) // 显示地写上constructor构造函数。实例对象返回当前的constructor
// 显示的返回对象
class Person2 {
constructor() {
return {}
}
}
console.log(new Person2()) // 这实例的返回值就是一个空对象，constructor返回值只有是对象才可以
super关键字
class Person {
}
class school extends Person {
constructor() {
super() // 这里继承了Person类，但是必须使用super调用，否则会报错。
}
}
上面school类继承了Person类，如果不在constructor中调用super关键字那么它就会报错。因为子类没有自己的this对象，而是继承父类的this对象，这里的super关键字就是父类Person对象。最终实例化返回的是school实例，super函数 内部会Person.prorotype.constructor.call(this)
注意，super函数只能在类中执行一次，否则会报错
super关键字之前不能调用this
在super调用之前，不能使用this，否则报错。因为这时候super还没有被调用。
class Person {
}
class school extends Person {
constructor() {
console.log(this) // 报错ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
super()
}
}
// 分析一下，内部隐式操作
class school extends Person {
constructor() {
// console.log(this) // 报错
let _this = super();
return _this;
}
}
上面代码中，我们说过不能在super之前调用this，而是等super调用完之后Person.prorotype.constructor.call(this)，隐式返回this。返回当前的实例对象，这时this就可以使用了，并且指向当前实例。
super关键字也可以当做一个对象使用
class Person {
getName() {
return "前端娱乐圈"
}
}
Person.prototype.name = "蛙人"
Perosn.prototype.age = 18
class school extends Person {
constructor() {
const res = super() // 这里的super指向Person类
console.log(super.getName(), super.name) // 这里的super关键字指向Person.prototype
}
getAge() {
console.log(super.age)
}
}
上面代码中，super函数只能拥有一个，但super关键字可以当成一个对象使用，super关键字当成对象指向的是父类prototype原型对象。super关键字可以在类的任何地方使用，但super函数只能在constructor中使用。
注意：super函数返回值是当前类的实例，super关键字指向的当前类的prototype
get
用于获取取值属性，刚在上面我们说过，私有属性不能在类的外部访问，但是我们可以通过get关键字来获取类里面的私有属性。
class Person {
private username = "前端娱乐圈";
private age = 18;
get getVal() {
return this.username;
}
}
const res = new Person();
console.log(res.getVal) // 前端娱乐圈
那么我们来看一下，这个get关键字和定义一个方法有何不同。
class Person {
private username = "前端娱乐圈";
private age = 18;
getVal() {
return this.username;
}
}
const res = new Person();
console.log(res.getVal()) // 前端娱乐圈
上面我们把get关键字去掉了，并且调用时候的带上了()代表要执行一个函数。虽然这样写跟get关键字效果是一样的，但是不推荐我们这么写，就像Vue中我们使用computed写，就不推荐methods里面写。官方定义的get是取值函数，我们取值直接用get关键字就行也不用写()，就像获取一个属性一样。
set
set存值函数，上面说了get，那么有get就一定有set。存值函数跟取值函数一个意思，一个获取一个设置嘛。
class Person {
private username = "前端娱乐圈";
private age = 18;
get getVal() {
return this.username;
}
set setVal(val) {
this.username = val
}
}
const res = new Person();
res.setVal = "蛙人"
console.log(res.getVal()) // 蛙人
上面我们先执行了存值，然后在取值，跟我们预期的结果一样，我们存值改变了username，获取值也会改变。
私有属性
在类中私有属性必须以#开头声明，以#开头的只能在类中访问，在类的外部不能访问。如果用的TypeScript完全可以使用private代替。
class Person {
#name = "蛙人"
constructor() {
}
getName() {
return this.#name
}
#getAge() {
return 18
}
}
const res = new Person();
// console.log(this.#name) // 报错，必须在封闭类中声明该字段
console.log(res.getName()) // 蛙人
console.log(res.#getAge) // 报错，getAge is not function
static
static为类的静态属性，"静态数据"是啥意思呢，就是不用实例化类就可以访问的属性。像我们不是static定义的属性和方法都必须的实例化类才能调用。
这里需要注意一下，当我们定义完
非static定义的属性
class Person {
username = "前端娱乐圈";
age = 18;
}
const res = new Person().username; // 前端娱乐圈
像我们这种非static定义的属性，要想访问username属性就必须得实例化new才能访问。
static定义的属性
static定义的静态属性，就是不用实例化就可以直接访问。不定义在实例化对象上面。
// 之前老的写法
class Person {}
Person.username = "前端娱乐圈"
// 新写法，加一个static关键字即可
class Person {
static username = "前端娱乐圈";
static age = 18;
static getName() {
return Person.username
}
}
console.log(Person123.username, Person123.getName()) // 前端娱乐圈，前端娱乐圈
之前老写法的静态属性定义在类的外部。整个类生成以后，再生成静态属性。这样让人很容易忽略这个静态属性，也不符合相关代码应该放在一起的代码组织原则。为了解决这问题，就新出的static关键字静态方法
以下这三个修饰符是在
TypeScript类中才能使用，在JavaScript类中是不支持的。
public
public为类的公共属性，就是不管在类的内部还是外部，都可以访问该类中属性及方法。默认定义的属性及方法都是public。
class Person {
name = "前端娱乐圈";
public age = 18;
}
const res = new Person();
console.log(res.name, res.age) // 前端娱乐圈 18
上面可以看到打印结果都能显示出来，name属性没有定义public公共属性，所以类里面定义的属性及方法默认都是public定义。
private
private为类的私有属性，只有在当前类里面才能访问，当前类就是{}里面区域内。在{}外面是不能访问private定义的属性及方法的
class Person {
private name = "前端娱乐圈";
private age = 18;
}
const res = new Person();
console.log(res.name, res.age) // 这俩行会爆红，当前属性为私有属性，只能在类内部访问
class Scholl extends Person {
getData() {
return this.username + "," + this.age
}
}
const temp = new Scholl()
console.log(temp.getData()) // 爆红~，虽然继承了Person类，但是private定义是只能在当前类访问，子类也不能访问。
protected
protected为类的保护属性，只有在当前类和子类可以访问。也就是说用protected属性定义的子类也可以访问。
class Person {
protected username = "前端娱乐圈";
protected age = 18;
}
const res = new Person();
console.log(res.name, res.age) // 这俩行会爆红，当前属性为私有属性，只能在类内部访问
class Scholl extends Person {
getData() {
return this.username + "," + this.age
}
}
const temp = new Scholl()
console.log(temp.getData()) // 前端娱乐圈，18。可以正常访问父类的属性
例子
例如我们写如下一个小Demo弹窗，可以单独写一个class类里面，这样写法是不是比我们ES5中的prototype写法看着舒服多了。当然我们日常开发中的业务，公共方法也可以写进一个类里面
class Mask {
isShow = false;
elem = null
constructor() {
this.elem = this.init()
}
init() {
const oDiv = document.createElement("div");
document.body.appendChild(oDiv);
return oDiv;
}
show() {
this.elem.style.display = "block"
this.isShow = true;
}
hide() {
this.elem.style.display = "none"
this.isShow = false;
}
}
结语
ES6的class类毕竟是一个“语法糖”，所以只要理解了JavaScript中对象的概念和面向对象的思想，class 就不难理解啦~，下篇准备更新TypeScript文章感兴趣的小伙伴可以点个关注+赞哦。
公众号：前端娱乐圈。欢迎关注
感兴趣的小伙伴可以加入 [ 前端娱乐圈交流群 ] 欢迎大家一起来交流讨论
