还在用原型函数编程吗，快来试试ES6-Class类吧！真香
前言
在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类里面声明的方法，全部挂载到当前类的prototypeconstructor
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 = 18class 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关键字指向的当前类的prototypeget 用于获取取值属性，刚在上面我们说过，私有属性不能在类的外部访问，但是我们可以通过
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 【还在用原型函数编程吗，快来试试ES6-Class类吧！真香】
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文章感兴趣的小伙伴可以点个关注+赞哦。公众号：前端娱乐圈。欢迎关注感兴趣的小伙伴可以加入前端娱乐圈交流群欢迎大家一起来交流讨论
推荐阅读
- 学无止境，人生还很长
- gitlab|gitlab 通过备份还原 admin/runner 500 Internal Server Error
- 幸福的婚姻不争对错！读《你要的是幸福还是对错》有感。
- 高大上还是路边摊
- 晚点的末班车
- 昨晚做春梦了吗（教给你怎么做最厉害的！梦里还有维多利亚的天使）
- 阴雨
- 人生游戏--是游戏，还是人生（）
- 请叫我冉责编
- 凡有的，还要多给他，凡没有的，连他现有的也要拿走