前言

在我们日常开发中，我们常常需要创建出许多相同类型的对象，例如商品，用户或者其他东西。Es6之前我们可以用构造函数的方法帮助我们去实现这种需求。为了更接近传统语言的写法，Es6引入了Class这个概念作为对象的模板，它为对象提供了状态（成员变量）的初始值和行为（函数或方法）的实现。通过class关键字可以定义类。

Class语法

基本语法是：

class MyClass {
    constructor() {//默认返回一个实例对象this
       ...
    }
    method1(){...}
    method2(){...}
    method3(){...}
}

然后通过new MyClass()来创建一个具有该类中的属性和方法的对象。

constructuor方法，通过new命令生成对象实例自动调用该方法，在该方法中初始化对象，这个方法是类必须有的方法，如果没有显示定义会被默认添加。

举个例子：

class Person {
    constructor(name, age) {//默认返回一个实例对象this
        this.name = name
        this.age = age
    }

    say() {
        console.log('hello');
    }


}
let p = new Person('闰土', 20);

console.log(p);
p.say()

上述代码执行结果为：

什么是Class?

在Js中，类是一种函数

看下面代码：

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
     say() {
        console.log('hello');
    }
}
console.log(typeof Person);
//结果为function

那Class在构造过程中干了什么事呢？

1. 创建了一个名为Person的函数，这个函数里面的代码来自constructuor方法。
2. 存储类里面的方法，例如上面代码相当于在函数Person的原型上设置了say方法。

不仅仅是语法糖

Class可以看作是一个语法糖，它的大部分功能Es5都能做到，这种写法让对象原型的写法更加清晰，更像面向对象编程的语法。

例如上面的代码Es6之前我们可以这样完成：

Person.prototype.say = function () {
    console.log('hello');
}

function Person(name, age) {
    this.name = name
    this.age = age
}

这两种方法都能帮助我们解决问题，我们可以认为Class是构造器函数和原型方法的语法糖，但是他们还是有区别的：

1. 首先写法上就不一样，Class中用到了constructuor方法，而且需要在前面声明这是一个类。
2. 类方法不可以枚举，哪怕是for in也无法遍历。类定义将 prototype 中的所有方法的 enumerable 标志设置为 false。
3. 在类构造中的所有代码都将自动进入严格模式。
4. 类不存在变量提升，我们知道函数有声明提升，但是Class不会。

Set和Get

在Class中set负责设置值，get负责取值，我们来看下面代码示例：

let h = 'handle'
class Count {
    _count = 0

    get value() {
        return this._count
    }

    set setVal(val) {
        this._count = val
    }
    //可以用类里面的表达式作为属性名
    [h]() {
        console.log('jjjjj');
    }
}

let c = new Count()
c[h]()//结果为jjjjj
c.setVal = 1
console.log(c.value);//结果为1

继承

Es6之前想要实现继承需要通过原型链来完成，看如下代码：

Parent.prototype.say = function () {
    console.log('哈哈哈哈');
}
function Parent() {
    this.name = 'Parent'
}

Son.prototype = new Parent()
function Son() {
    this.name = 'Son'
}
let s = new Son()
s.say()//结果为 哈哈哈哈

在Es6中我们可以直接通过extends关键字来实现继承：

class Parent {
    _pname = 'pname'
    say() {
        console.log('哈哈哈');
    }
}

class Son extends Parent {
    _sname = 'sname'
}

let s = new Son()
s.say()

结果和上面是一样的。

私有属性和静态方法

私有属性顾名思义是自己私有的，在类的外部不允许访问，我们只需要在属性前面加上#就可以将这个属性变为私有。

静态方法相当于在函数身上挂方法，构造的实例对象访问不到，只能类自己访问。我们只需要在方法前面加上static关键字，就可以将这个方法设置为静态方法。

class Person {
    #weight = 120  //私有属性
    constructor(name) {
        this.name = name
    }
    static say() { }//静态方法

}

let p = new Person()
p.say()//实例对象访问不到
console.log(p.#weight);
//报错 Private field '#weight' must be declared in an enclosing class

结语

关于Class类本篇文章就聊到这，可能不是很详细，欢迎各位大佬评论区交流讨论。