ES6 class 类的用法

本贴最后更新于 1777 天前,其中的信息可能已经时移世易
##### es6 class基础用法 以前的JavaScript没有类的概念,它是基于原型的面相对象的语言。原型对象的特点就是将自身属性共享给新对象。我们先看一下下面的代码实现。 ```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()

全文完,如果有不对的地方,希望能积极指出来,大家都是学习者。

  • ES6
    10 引用 • 6 回帖 • 1 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1278 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...