ES6中的類

飛鷹3995發表於2021-06-18

昨天小編更新了一下關於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中的類的語法糖]

 

相關文章