关于javascript: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 示意 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) // 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 示意 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) // 8
console.log(Coder.count) // 8 继承自该类的子类也能够拜访“动态属性”console.log(typeof People) // function   [es6 中 class 只是 es5 中的类的语法糖]