定義

類是構造函數、原型鏈的語法糖。

定義類有兩種方式

class Student {
}
var Student = class {
}

某些瀏覽器可能無法解析es6及以上的語法，這時候需要通過babel將代碼解析成瀏覽器可識別的語法，定義類的語法通過babel編譯之後就是通過function定義的構造函數。

類和構造函數是一樣的，通過new關鍵字創建，具有prototype屬性

class Student{}
var student = new Student()
console.log(Student.prototype)
console.log(Student.prototype.constructor)
console.log(student.__proto__ === Student.prototype)
console.log(student instanceof Student)
console.log(typeof Student)

執行結果如下

類的方法

構造方法

通過constructor來定義類的構造方法，通過new關鍵字來創建類的實例時會執行構造方法中的代碼

class Student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
var student = new Student('alice', 18)
console.log(student)

執行結果如下，創建了一個Student的實例對象

babel解析結果如下

實例方法

實例方法就是掛載在類（構造函數）原型上的方法，可以供所有的實例對象使用，不會在每個實例對象上保存一份

class Student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  studying() {
    console.log(`${this.name} likes studing~`)
  }
}
var student = new Student('kiki', 16)
console.log(student)
student.studying()

執行結果如下

訪問器方法

訪問器方法可以用於獲取/修改類中的屬性

class Student {
  constructor(){
    this.mainSubject = 'Chinese'
  }
  get subject(){
    console.log('獲取主修課')
    return this.mainSubject
  }
  set subject(value){
    console.log('修改主修課')
    this.mainSubject = value
  }
}
var student = new Student()
console.log(student)
student.mainSubject = 'Math'
console.log(student)

執行結果如下

靜態方法

定義在類（構造函數）上，且僅供類（構造函數）自身可使用

class Student {
  static showInfo(){
    console.log('我是一個Student類')
  }
}
Student.showInfo()

執行結果如下

繼承

類中實現繼承要比構造函數中更為簡單，通過extends關鍵字就可以實現兩個類的繼承關係。

class Person{
  eating(){
    console.log('person eating')
  }
}
class Student extends Person{
}
var student = new Student()
console.log(student)
student.eating()

執行結果如下

如果要共享構造方法中的數據，則需要通過super來實現

class Person{
  constructor(name, age){
    this.name = name
    this.age = age
  }
  eating(){
    console.log('person eating')
  }
}

class Student extends Person{
  constructor(name, age, stuNo){
    super(name, age)
    this.stuNo = stuNo
  }
  eating(){
    super.eating()
    console.log('student eating')
  }
}

var student = new Student('kiki', 16, 1)
console.log(student)
student.eating()

執行結果如下

繼承內置類

當我們需要對javascript內置的函數做一些擴充的時候，可以繼承自內置的函數。比如對數組進行補充，新增一個返回數組中第一個元素的方法。

class iArray extends Array {
  firstItem(){
    return this[0]
  }
}
let arr = new iArray(1, 2, 3)
console.log(arr)
console.log(arr.firstItem())

執行結果如下

混入

javascript中只能單繼承，不支持多個父類，當子類希望獲取多個父類的屬性和方法時，可以自定義mixin的方式來實現繼承關係

function mixinRunner(BaseClass) {
  return class extends BaseClass {
    running() {
      console.log('running')
    }
  }
}
function mixinEater(BaseClass){
  return class extends BaseClass {
    eating() {
      console.log('eating')
    }
  }
}
class Person {
 
}
const Student = mixinEater(mixinRunner(Person))
const student = new Student()
student.running()
student.eating()

執行結果如下

多態

不同的數據類型操作執行同一個操作時，表現出來的行為不一致，就稱為多態。

function calcArea(foo) {
  console.log(foo.getArea())
}

var circle = {
  radius: 6,
  getArea() {
    return this.radius * 3.14
  }
}

function Person() {
  this.getArea = function(){
    return 20
  }
}

calcArea(circle)
calcArea(new Person())

執行結果如下

以上執行兩次calcArea函數，傳入的參數分別為普通對象和實例對象，執行他們各自的getArea方法，最後獲取的結果也不一樣

以上就是ES6之類（class）使用的具體介紹，關於js高級，還有很多需要開發者掌握的地方，可以看看我寫的其他博文，持續更新中~