TypeScript Symbol

本節(jié)介紹 symbol 類型的語法、使用方法和應(yīng)用場景，每個從 Symbol() 返回值的唯一性是使用 symbol 類型的最重要原因。

1. 慕課解釋

symbol 是一種基本數(shù)據(jù)類型（primitive data type）。

Symbol() 函數(shù)會返回 symbol 類型的值。每個從 Symbol() 返回的 symbol 值都是唯一的。

2. 語法

Symbol([description])

參數(shù) description：可選的，字符串類型。

3. 介紹

使用 Symbol() 創(chuàng)建新的 symbol 類型：

const sym1: symbol = Symbol()
const sym2: symbol = Symbol('foo')
const sym3: symbol = Symbol('foo')

上面的代碼創(chuàng)建了三個新的 symbol 類型，但要注意每個從 Symbol() 返回的值都是唯一的：

console.log(sym2 === sym3) // false

代碼解釋： 每個 Symbol() 方法返回的值都是唯一的，所以，sym2 和 sym3 不相等。

Symbol() 作為構(gòu)造函數(shù)是不完整的：

const sym = new Symbol() // TypeError

這種語法會報錯，是因為從 ECMAScript 6 開始圍繞原始數(shù)據(jù)類型創(chuàng)建一個顯式包裝器對象已不再被支持，但因歷史遺留原因， new Boolean()、new String() 以及 new Number() 仍可被創(chuàng)建：

const symbol = new Symbol()   // TypeError
const bigint = new BigInt()   // TypeError

const number = new Number()   // OK
const boolean = new Boolean() // OK
const string = new String()   // OK

4. 使用場景

1. 當一個對象有較多屬性時（往往分布在不同文件中由模塊組合而成），很容易將某個屬性名覆蓋掉，使用 Symbol 值可以避免這一現(xiàn)象，比如 vue-router 中的 name 屬性。

// a.js 文件
export const aRouter = {
  path: '/index',
  name: Symbol('index'),
  component: Index
},

// b.js 文件

export const bRouter = {
  path: '/home',
  name: Symbol('index'), // 不重復(fù)
  component: Home
},

// routes.js 文件
import { aRouter } from './a.js'
import { bRouter } from './b.js'

const routes = [
  aRouter,
  bRouter
]

代碼解釋： 兩個不同文件使用了同樣的 Symbol('index') 作為屬性 name 的值，因 symbol 類型的唯一性，就避免了重復(fù)定義。

2. 模擬類的私有方法

const permission: symbol = Symbol('permission')

class Auth {
  [permission]() {
    // do something
  }
}

這種情況通過類的實例是無法取到該方法，模擬類的私有方法。

但是，TypeScript 是可以使用 private 關(guān)鍵字的，所以這種方法可以在 JavaScript 中使用。

3. 判斷是否可以用 for...of 迭代

if (Symbol.iterator in iterable) {
    for(let n of iterable) {
      console.log(n)
    }
}

這個知識點后續(xù)會在 迭代器 那一節(jié)會著重介紹，這里可以先知曉：

• for...of 循環(huán)內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的 Symbol.iterator 方法。
• for...of 只能迭代可枚舉屬性。

4. Symbol.prototype.description

Symbol([description]) 中可選的字符串即為這個 Symbol 的描述，如果想要獲取這個描述：

const sym: symbol = Symbol('imooc')

console.log(sym);               // Symbol(imooc)
console.log(sym.toString());    // Symbol(imooc)
console.log(sym.description);   // imooc

TIPS： description 屬性是 ES2019 的新標準，Node.js 最低支持版本 11.0.0。

5. 小結(jié)

本節(jié)介紹了 Symbol 一些常見的使用方法，雖然較少使用，但在特定場景非常有用。