你知道ES6 class类的用法吗？

es6 class 基础用法

之前的 JavaScript 没有类的概念，它是基于原型的面相对象的语言。原型对象的特色就是将自身属性共享给新对象。咱们先看一下下面的代码实现。

//常规写法
function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayInfo = function () {
    console.log(`${this.name}是 ${this.age}岁`)
}
const liLei = new Person('LiLei',20)
liLei.sayInfo()
 //LiLei是20岁

这种常规约定是以大写字母开头来表示一个构造器(大写开头非官方)，能够直接定义函数，也能够经过 prototype 来扩展函数。这种实现跟 java 比，实现类的方案太特别了，下面咱们看一下 es6 的类的实现方式：

class Person{ //定义了一个名字为Person的类
    constructor(name,age){ //constructor是一个构造方法，用来接收参数
    this.name = name;  //this表明的是实例对象
    this.age = age;
}
sayInfo(){
    console.log(`${this.name}是 ${this.age}岁`)
    }
}
const liLei = new Person('LiLei',21)
liLei.sayInfo()

由下面代码能够看出类实质上就是一个函数。类自身指向的就是构造函数。因此能够认为 ES6 中的类其实就是构造函数的另一种写法！下面的代码能够证实这一点

console.log(typeof Person);//function
console.log(Person===Person.prototype.constructor);//true

类的继承

JavaScript 中的类一样能够像 java 同样，能够继承某个类，其中被继承的类称为父类，而继承父类的被称为子类。子类能够有本身的函数和构造器，当子类中存在父类相同的方法时，则该方法不会从父类继承，而使用子类的方法。

class Student {
    constructor(name){
        this.name = name
    }
    sayName(){
        console.log(this.name)
    }
    testFn(){
        console.log('我是父类的函数！')
    }
    }
    class Worker extends Student{
    sayWork(){
        console.log(this.name)
    }
    testFn(){
        console.log('我是子类的函数！')
    }
}
const person = new Worker('liLei')
person.sayName()
person.sayWork()
person.testFn()
//输出：
//liLei
//liLei
//我是子类的函数！

能够看到子类 Worker 继承了 Student 类的 sayName 函数和 name 这个内部变量。可是同名函数 testFn 没有继承，是调用到了子类的 testFn 函数。这里也能够理解为子类的 testFn 函数覆盖了父类的 testFn 函数。

super 关键字的使用

super 关键字的一个做用是用来访问父类的构造器或者函数用的。子类在使用构造器的时候，必须使用 super 关键字，用来扩展构造器。上面提到的，子类同名函数会覆盖父类同名函数，这时候，咱们使用 super 关键字，一样能调用到父类的同名函数，就是简单理解为 super 实际上是父类的一个实例对象。

class Student {
    constructor(name){
        this.name = name
    }
    testFn(){
        console.log('我是父类的函数！')
    }
}
class Worker extends Student{
    constructor(name,age,sex){
        super(name)    //这里必须先调用super，才有下文的this对象，这里扩展了一个变量age
        this.age = age
        this.sex = sex
    }
    testFn(){
        super.testFn();
        console.log("年龄" + this.age)
        console.log("性别" + this.sex)
        console.log('我是子类的函数！')
    }
}
const person = new Worker('liLei','20')
person.testFn()
//输出：
//我是父类的函数！
//年龄20
//性别undefined
//我是子类的函数！
//我是子类的函数！

能够看到上面用 super 关键字实现了子类的构造器，还扩展了 2 个变量 age,sex。同时使用 super 调用到了父类的方法，因此在子类中即便有父类的同名方法，同样能够实现父类同名方法的调用。super 能够理解为父类的一个会实例化对象，但不一样的是 super 只能访问父类的方法和，不能访问私有变量。

static 关键字

static 关键字通常做用于类的方法，用来定义一个工具函数。static 方法不能被实例对象调用，只能经过类名来调用。同时 static 方法也能够被继承，并且也能在子类中用 super 对象来调用父类中的 static 方法。

class Person{      //没有constructor的类会默认生成一个constructor构造器
        static sayName(){
            console.log("我是static函数")
        }
    }
class Student extends Person{}
const student = new Student()
Person.sayName()
Student.sayName()
student.sayName()
//输出：
//我是static函数
//我是static函数
//student.sayName is not a function

能够看到用实例化的对象来调用 static 方法时，代码会报错。

es6 中类的使用场景

平时咱们开发的时候不多使用类的，特别是如今基于 vue 或者 react 开发时，一些组件化的东西直接使用各自框架封装好的方式引用，就使用的更少了。
可是某些时候，咱们使用 es6 的类可让咱们的代码的可读性更高。好比说一个分页组件，里面会有计算总页数，上一页，下一页，跳页等方法。咱们能够把这个分页函数写在一个类里面，在引用的地方去实例化它，当一个页面有多个分页时，也能够实例化多个，独立调用，互不影响。
总结来讲，类能够在封装工具的时候用。最后附上分页工具类的大体代码：

class PageUtil{
    constructor(pageNo,pageSize,total){    //构造初始变量
        this.pageNo = pageNo;     //起始页面
        this.pageSize = pageSize  //一页数据条数
        this.total = total        //数据总数
        this.currentPage = 0      //当前选中页数
        this.pageTotal = Math.ceil(this.total/this.pageSize)   //总页数
    }
    nextPage(){     //下一页
        if(this.currentPage < this.pageTotal){
            this.currentPage++
        }
    }
    beforePage(){    //上一页
        if(this.currentPage > 1){
            this.currentPage--
        }
    }
    jumpPage(page){     //跳页
        this.currentPage = page
    }
    changePageSize(pageSize){    //改变页大小
        this.pageSize = pageSize
        this.pageTotal = Math.ceil(this.total/this.pageSize)   //总页数
    }
    getTotalPage(){    //获取总页数
        return Math.ceil(this.total/this.pageSize)
    }
}


class DialogPage extends PageUtil{    //继承PageUtil类
    constructor(pageNo,pageSize,total,pageTotal){
        super(pageNo,pageSize,total)
        this.pageTotal = pageTotal
    }
    getTotalPage(){
        return this.pageTotal || super.getTotalPage()   //重写getTotalPage方法
    }
}
const contentPage = new PageUtil(1,10,100)   //实例化2个pageUtil对象
contentPage.getTotalPage()
const dialogPage = new DialogPage(1,10,100,10)
dialogPage.getTotalPage()

全部的源码均可以在个人仓库地址：https://github.com/jackzhujie...

我的博客：http://blog.aizhifou.cn

学习如逆水行舟，不进则退，前端技术飞速发展，若是天天不坚持学习，就会跟不上，我会陪着你们，天天坚持推送博文，跟你们一同进步，但愿你们能关注我，第一时间收到最新文章。

公众号：