摘要：新建一個(gè)類該函數(shù)返回一個(gè)類的實(shí)例給函數(shù)傳入通過立即調(diào)用類構(gòu)造函數(shù)可以創(chuàng)建單例。派生類是指繼承自其它類的新類。在構(gòu)造函數(shù)中訪問之前要調(diào)用，負(fù)責(zé)初始化。在構(gòu)造函數(shù)中使用通常表示當(dāng)前的構(gòu)造函數(shù)名。

ES5以及之前的版本，沒有類的概念，但是聰明的JavaScript開發(fā)者，為了實(shí)現(xiàn)面向?qū)ο螅瑒?chuàng)建了特殊的近類結(jié)構(gòu)。

ES5中創(chuàng)建類的方法：新建一個(gè)構(gòu)造函數(shù)，定義一個(gè)方法并且賦值給構(gòu)造函數(shù)的原型。

"use strict";
//新建構(gòu)造函數(shù)，默認(rèn)大寫字母開頭
function Person(name) {
  this.name = name;
}
//定義一個(gè)方法并且賦值給構(gòu)造函數(shù)的原型
Person.prototype.sayName = function () {
  return this.name;
};

var p = new Person("eryue");
console.log(p.sayName() // eryue
);

ES6實(shí)現(xiàn)類非常簡單，只需要類聲明。推薦 babel在線測(cè)試ES6 測(cè)試下面的代碼。

如果你學(xué)過java，那么一定會(huì)非常熟悉這種聲明類的方式。

class Person {
  //新建構(gòu)造函數(shù)
  constructor(name) {
    this.name = name //私有屬性
  }
  //定義一個(gè)方法并且賦值給構(gòu)造函數(shù)的原型
  sayName() {
    return this.name
  }
}
let p = new Person("eryue")
console.log(p.sayName()) // eryue

和ES5中使用構(gòu)造函數(shù)不同的是，在ES6中，我們將原型的實(shí)現(xiàn)寫在了類中，但本質(zhì)上還是一樣的，都是需要新建一個(gè)類名，然后實(shí)現(xiàn)構(gòu)造函數(shù)，再實(shí)現(xiàn)原型方法。

私有屬性：在class中實(shí)現(xiàn)私有屬性，只需要在構(gòu)造方法中定義this.xx = xx。

1、函數(shù)聲明可以被提升，類聲明不能提升。

2、類聲明中的代碼自動(dòng)強(qiáng)行運(yùn)行在嚴(yán)格模式下。

3、類中的所有方法都是不可枚舉的，而自定義類型中，可以通過Object.defineProperty()手工指定不可枚舉屬性。

4、每個(gè)類都有一個(gè)[[construct]]的方法。

5、只能使用new來調(diào)用類的構(gòu)造函數(shù)。

6、不能在類中修改類名。

類有2種表現(xiàn)形式：聲明式和表達(dá)式。

//聲明式
class B {
  constructor() {}
}

//匿名表達(dá)式
let A = class {
  constructor() {}
}

//命名表達(dá)式，B可以在外部使用，而B1只能在內(nèi)部使用
let B = class B1 {
  constructor() {}
}

JavaScript函數(shù)是一等公民，類也設(shè)計(jì)成一等公民。

1、可以將類作為參數(shù)傳入函數(shù)。

//新建一個(gè)類
let A = class {
  sayName() {
    return "eryue"
  }
}
//該函數(shù)返回一個(gè)類的實(shí)例
function test(classA) {
  return new classA()
}
//給test函數(shù)傳入A
let t = test(A)
console.log(t.sayName()) // eryue

2、通過立即調(diào)用類構(gòu)造函數(shù)可以創(chuàng)建單例。

let a = new class {
  constructor(name) {
    this.name = name
  }
  sayName() {
    return this.name
  }
}("eryue")
console.log(a.sayName()) // eryue

類支持在原型上定義訪問器屬性。

class A {
  constructor(state) {
    this.state = state
  }
  // 創(chuàng)建getter
  get myName() {
    return this.state.name
  }
  // 創(chuàng)建setter
  set myName(name) {
    this.state.name = name
  }
}
// 獲取指定對(duì)象的自身屬性描述符。自身屬性描述符是指直接在對(duì)象上定義（而非從對(duì)象的原型繼承）的描述符。
let desriptor = Object.getOwnPropertyDescriptor(A.prototype, "myName")
console.log("get" in desriptor) // true
console.log(desriptor.enumerable) // false 不可枚舉

可計(jì)算成員是指使用方括號(hào)包裹一個(gè)表達(dá)式，如下面定義了一個(gè)變量m，然后使用[m]設(shè)置為類A的原型方法。

let m = "sayName"
class A {
  constructor(name) {
    this.name = name
  }
  [m]() {
    return this.name
  }
}
let a = new A("eryue")
console.log(a.sayName()) // eryue

回顧一下上一章講的生成器，生成器是一個(gè)返回迭代器的函數(shù)。在類中，我們也可以使用生成器方法。

class A {
  *printId() {
    yield 1;
    yield 2;
    yield 3;
  }
}
let a = new A()
console.log(a.printId().next()) // {done: false, value: 1}
console.log(a.printId().next()) // {done: false, value: 2}
console.log(a.printId().next()) // {done: false, value: 3}

這個(gè)寫法很有趣，我們新增一個(gè)原型方法稍微改動(dòng)一下。

class A {
  *printId() {
    yield 1;
    yield 2;
    yield 3;
  }
  render() {
  //從render方法訪問printId，很熟悉吧，這就是react中經(jīng)常用到的寫法。
    return this.printId()
  }
}
let a = new A()
console.log(a.render().next()) // {done: false, value: 1}

靜態(tài)成員是指在方法名或?qū)傩悦懊婕由蟬tatic關(guān)鍵字，和普通方法不一樣的是，static修飾的方法不能在實(shí)例中訪問，只能在類中直接訪問。

class A {
  constructor(name) {
    this.name = name
  }
  static create(name) {
    return new A(name)
  }
}
let a = A.create("eryue")
console.log(a.name) // eryue

let t = new A()
console.log(t.create("eryue")) // t.create is not a function

我們?cè)趯憆eact的時(shí)候，自定義的組件會(huì)繼承React.Component。

class A extends Component {
   constructor(props){
       super(props)
   }
}

A叫做派生類，在派生類中，如果使用了構(gòu)造方法，就必須使用super()。

class Component {
  constructor([a, b] = props) {
    this.a = a
    this.b = b
  }
  add() {
    return this.a + this.b
  }
}

class T extends Component {
  constructor(props) {
    super(props)
  }
}

let t = new T([2, 3])
console.log(t.add()) // 5

關(guān)于super使用的幾點(diǎn)要求：

1、只可以在派生類中使用super。派生類是指繼承自其它類的新類。

2、在構(gòu)造函數(shù)中訪問this之前要調(diào)用super()，負(fù)責(zé)初始化this。

class T extends Component {
  constructor(props) {
    this.name = 1 // 錯(cuò)誤，必須先寫super()
    super(props)
  }
}

3、如果不想調(diào)用super，可以讓類的構(gòu)造函數(shù)返回一個(gè)對(duì)象。

我們可以在繼承的類中重寫父類的方法。

class Component {
  constructor([a, b] = props) {
    this.a = a
    this.b = b
  }
  //父類的add方法，求和
  add() {
    return this.a + this.b
  }
}

class T extends Component {
  constructor(props) {
    super(props)
  }
  //重寫add方法，求積
  add() {
    return this.a * this.b
  }
}
let t = new T([2, 3])
console.log(t.add()) // 6

父類中的靜態(tài)成員，也可以繼承到派生類中。靜態(tài)成員繼承只能通過派生類訪問，不能通過派生類的實(shí)例訪問。

class Component {
  constructor([a, b] = props) {
    this.a = a
    this.b = b
  }
  static printSum([a, b] = props) {
    return a + b
  }
}
class T extends Component {
  constructor(props) {
    super(props)
  }
}
console.log(T.printSum([2, 3])) // 5

很好理解，就是指父類可以是一個(gè)表達(dá)式。

有些牛逼的人覺得使用內(nèi)建的Array不夠爽，就希望ECMA提供一種繼承內(nèi)建對(duì)象的方法，然后那幫大神們就把這個(gè)功能添加到class中了。

class MyArray extends Array { }
let colors = new Array()
colors[0] = "1"
console.log(colors) // [1]

該用法我還沒有接觸過，目前只知道在內(nèi)建對(duì)象中使用了該方法，如果在類中調(diào)用this.constructor，使用Symbol.species可以讓派生類重寫返回類型。

new.target通常表示當(dāng)前的構(gòu)造函數(shù)名。通常我們使用new.target來阻止直接實(shí)例化基類，下面是這個(gè)例子的實(shí)現(xiàn)。

class A {
  constructor() {
  //如果當(dāng)前的new.target為A類，就拋出異常
    if (new.target === A) {
      throw new Error("error haha")
    }
  }
}
let a = new A()
console.log(a) // error haha

本章只有一個(gè)知識(shí)點(diǎn)，那就是class的使用，最開始的聲明class，到后面的繼承派生類，都是非常常用的寫法，還有靜態(tài)成員的使用。

如果上面的那些例子你練習(xí)的不夠爽，或許你該找個(gè)react基礎(chǔ)demo簡單的使用class來練練手了。

=> 返回文章目錄