JS 總結之 class

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
複製代碼

🚀 參考

• 《ECMAScript 6 入門》Class 的基本語法 by 阮一峯