前言
在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指向本人的实例// 显示写上constructorclass 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关键字指向的以后类的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文章感兴趣的小伙伴能够点个关注+赞哦。
公众号：前端娱乐圈。欢送关注
感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨