ES6中的类 javascriptes6前端

【ES6中的类】昨天小编更新了一下关于es5中的类的处理，也顺便将es5中类的知识和语法简单回顾一下，今天小编将es6中的与类相关的语法和大家一起探讨一下。在es6中，对类的实现主要是引入关键字class和extends。下面是一些例子。大家也可以关注我的微信公众号，蜗牛全栈。
一、类的创建

class People{ constructor(name,age){ this.name = name this.age = age } showName(){ console.log(this.name) } }let p1 = new People("lilei",34) console.log(p1) // People{name:"lilei",age:34}

二、类的继承

class People{ constructor(name,age){ this.name = name this.age = age } showName(){ console.log(this.name) } } let p1 = new People("lilei",34) console.log(p1) // People{name:"lilei",age:34}class Coder extends People{ constructor(name,age,company){ super(name,age) // 通过super关键字，里面的参数是集成自父类 this.company = company } showConpany(){ console.log(this.company) } }let c1 = new Coder("hanmeimei",24,"AILI") console.log(c1) // Coder{name:"hanmeimei",age:24,company:"AILI"} c1.showConpany() // AILI c1.showName() // hanmeimei

三、通过get和set获取和设置类的属性
1、错误示范

class People{ constructor(name,age){ this.name = name this.age = age } get sex(){ // 当前属性是只读的【get】 return "male" }set sex(val){ this.sex = val // 会反复调用这个方法，不停的对sex属性进行设置，进入死循环 }showName(){ console.log(this.name) } }let p1 = new People("lilei",34) console.log(p1) // People{name:"lilei",age:34} p1.sex = "female" // Maximum call stack size exceeded

2、正确示例

class People{ constructor(name,age){ this.name = name this.age = age this._sex = -1 // 为了防止死循环，引入新属性 } get sex(){ // 属性 return this._sex }set sex(val){ this._sex = val }showName(){ console.log(this.name) } }let p1 = new People("lilei",34) console.log(p1) // People{name:"lilei",age:34} p1.sex = "female" console.log(p1.sex) // male

从上面的例子可以看出，引入set和get之后，代码量反而增加了，这对于小编这么懒的人来说是很难忍受的，后来去查阅资料，才知道这样做还是有设计者的道理的，如果我没记错的话，java也存在类似的操作。引入这个主要是为了规范在设置和取值的时候的业务逻辑，简单理解就是设置的时候，有设置时候的规则，获取有返回值的规则，看看下面的例子能更清晰一些。

class People{ constructor(name,age){ this.name = name this.age = age this._sex = -1 // 为了防止死循环，引入新属性 } get sex(){ // 属性根据_sex值不同返回不同信息 if(this._sex == 1){ return "male" }else if(this._sex == 0){ return "female" }else{ return "error" } }set sex(val){ // 1表示male0表示female只有在设置值满足条件才能设置进去 if(val == 0 || val == 1){ this._sex= val } }showName(){ console.log(this.name) } }let p1 = new People("lilei",34) let c1 = new Coder("hanmeimei",24,"AILI") console.log(p1) // People{name:"lilei",age:34} // p1.sex = 1 // console.log(p1.sex) // male // p1.sex = 0 // console.log(p1.sex) // female p1.sex = 666 console.log(p1.sex) // error c1.sex = 1 console.log(c1.sex) // female子类也可以使用对应的规则

四、静态方法和静态属性
1、静态方法：通过static关键字实现

class People{ constructor(name,age){ this.name = name this.age = age } // 实例方法，通过实例对象调用 showName(){ console.log(this.name) } // 静态方法，通过类直接调用 static getCount(){ return 5 } } let p1 = new People("lilei",34) p1.showName() // lilei People.getCount() // 5 p1.getCount() // 报错：p1.getCount is not a function

2、静态属性：es6中没有单独规定静态属性的声明方式，建议使用以下方式定义静态属性。

class People{ constructor(name,age){ this.name = name this.age = age this._sex = -1 // 为了防止死循环，引入新属性 } get sex(){ // 属性 if(this._sex == 1){ return "male" }else if(this._sex == 0){ return "female" }else{ return "error" } }set sex(val){ // 1表示male0表示female if(val == 0 || val == 1){ this._sex= val } }showName(){ console.log(this.name) } static getCount(){ return 5 } }class Coder extends People{ constructor(name,age,company){ super(name,age) this.company = company } showConpany(){ console.log(this.company) } }People.count = 8 // 定义People中的静态属性let p1 = new People("lilei",34) console.log(People.count) // 8 console.log(Coder.count) // 8 继承自该类的子类也可以访问“静态属性” console.log(typeof People) // function[es6中class只是es5中的类的语法糖]