JS 總結之 class

Karon_發表於2018-12-22
JS

class 是 ES6 的新特性，可以用來定義一個類，實際上，class 只是一種語法糖，它是建構函式的另一種寫法。（什麼是語法糖？是一種為避免編碼出錯和提高效率編碼而生的語法層面的優雅解決方案，簡單說就是，一種便攜寫法。）

class Person {

}
typeof Person // "function"
Person.prototype.constructor === Person // true
複製程式碼

? 使用

用法和使用建構函式一樣，通過 new 來生成物件例項

class Person {

}
let jon = new Person()
複製程式碼

? constructor

每個類都必須要有一個 constructor，如果沒有顯示宣告，js 引擎會自動給它新增一個空的建構函式：

class Person {

}
// 等同於
class Person {
  constructor () {

  }
}
複製程式碼

? 屬性和方法

定義於 constructor 內的屬性和方法，即定義在 this 上，屬於例項屬性和方法，否則屬於原型屬性和方法。

class Person {
  constructor (name) {
    this.name = name
  }

  say () {
    console.log('hello')
  }
}

let jon = new Person()

jon.hasOwnPrototype('name') // true
jon.hasOwnPrototype('say') // false
複製程式碼

? 屬性表示式

let methodName = 'say'
class Person {
  constructor (name) {
    this.name = name
  }

  [methodName] () {
    console.log('hello')
  }
}
複製程式碼

? 靜態方法

不需要通過例項物件，可以直接通過類來呼叫的方法，其中的 this 指向類本身

class Person {
  static doSay () {
    this.say()
  }
  static say () {
    console.log('hello')
  }
}
Person.doSay() // hello
複製程式碼

靜態方法可以被子類繼承

// ...
class Sub extends Person {

}
Sub.doSay() // hello
複製程式碼

可以通過 super 物件訪問

// ...
class Sub extends Person {
  static nice () {
    return super.doSay()
  }
}
Sub.nice() // hello
複製程式碼

? 嚴格模式

不需要使用 use strict，因為只要程式碼寫在類和模組內，就只能使用嚴格模式。

? 提升

class 不存在變數提升。

new Person() // Uncaught ReferenceError: Person is not defined
class Person {

}
複製程式碼

? name 屬性

name 屬性返回了類的名字，即緊跟在 class 後面的名字。

class Person {

}
Person.name // Person
複製程式碼

? this

預設指向類的例項。

? 取值函式（getter）和存值函式（setter）

class Person {
  get name () {
    return 'getter'
  }
  set name(val) {
    console.log('setter' + val)
  }
}

let jon = new Person()
jon.name = 'jon' // setter jon
jon.name // getter
複製程式碼

? class 表示式

如果需要，可為類定義一個類內部名字，如果不需要，可以省略：

// 需要在類內部使用類名
const Person = class Obj {
  getClassName () {
    return Obj.name
  }
}
// 不需要
const Person = class {}
複製程式碼

立即執行的 Class：

let jon = new class {
  constructor(name) {
    this.name = name
  }
  sayName() {
    console.log(this.name)
  }
}('jon')

jon.sayName() //jon
複製程式碼

? 參考

相關文章