ES6之清楚明白的使用類（class）

阿新 • • 發佈：2021-11-20

定義

類是建構函式、原型鏈的語法糖。

定義類有兩種方式

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高階，還有很多需要開發者掌握的地方，可以看看我寫的其他博文，持續更新中~