共计 5447 个字符，预计需要花费 14 分钟才能阅读完成。
前言
在 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 文章 感兴趣的小伙伴能够点个关注 + 赞哦。
公众号：前端娱乐圈。欢送关注
感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨