昨天小编更新了一下对于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() // AILIc1.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示意male  0示意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) // femalep1.sex = 666console.log(p1.sex) // errorc1.sex = 1console.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() // lileiPeople.getCount() // 5p1.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示意male  0示意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) // 8console.log(Coder.count) // 8 继承自该类的子类也能够拜访“动态属性”console.log(typeof People) // function   [es6中class只是es5中的类的语法糖]