“睡服”面试官系列第十六篇之Symbol（建议收藏学习）
目錄
1. 概述
2. 作為屬性名的 Symbol
3. 實例：消除魔術(shù)字符串
4. 屬性名的遍歷
5. Symbol.for()，Symbol.keyFor()
6. 實例：模塊的 Singleton 模式
7. 內(nèi)置的 Symbol 值
7.1Symbol.hasInstance
7.2Symbol.isConcatSpreadable
7.3Symbol.species
7.4Symbol.match
7.5Symbol.replace
7.6Symbol.search
7.7Symbol.split
7.8Symbol.iterator
7.9Symbol.toPrimitive
7.10Symbol.toStringTag
7.11Symbol.unscopables
1. 概述
ES5 的對象屬性名都是字符串，這容易造成屬性名的沖突。比如，你使用了一個他人提供的對象，但又想為這個對象添加新的方法（mixin 模式），新方
法的名字就有可能與現(xiàn)有方法產(chǎn)生沖突。如果有一種機制，保證每個屬性的名字都是獨一無二的就好了，這樣就從根本上防止屬性名的沖突。這就是 ES6
引入 Symbol 的原因。
ES6 引入了一種新的原始數(shù)據(jù)類型 Symbol ，表示獨一無二的值。它是 JavaScript 語言的第七種數(shù)據(jù)類型，前六種是： undefined 、 null 、布爾值
（Boolean）、字符串（String）、數(shù)值（Number）、對象（Object）
Symbol 值通過 Symbol 函數(shù)生成。這就是說，對象的屬性名現(xiàn)在可以有兩種類型，一種是原來就有的字符串，另一種就是新增的 Symbol 類型。凡是屬
性名屬于 Symbol 類型，就都是獨一無二的，可以保證不會與其他屬性名產(chǎn)生沖突。
上面代碼中，變量 s 就是一個獨一無二的值。 typeof 運算符的結(jié)果，表明變量 s 是 Symbol 數(shù)據(jù)類型，而不是字符串之類的其他類型。
注意， Symbol 函數(shù)前不能使用 new 命令，否則會報錯。這是因為生成的 Symbol 是一個原始類型的值，不是對象。也就是說，由于 Symbol 值不是對
象，所以不能添加屬性。基本上，它是一種類似于字符串的數(shù)據(jù)類型。
Symbol 函數(shù)可以接受一個字符串作為參數(shù)，表示對 Symbol 實例的描述，主要是為了在控制臺顯示，或者轉(zhuǎn)為字符串時，比較容易區(qū)分。
上面代碼中， s1 和 s2 是兩個 Symbol 值。如果不加參數(shù)，它們在控制臺的輸出都是 Symbol() ，不利于區(qū)分。有了參數(shù)以后，就等于為它們加上了描
述，輸出的時候就能夠分清，到底是哪一個值。
如果 Symbol 的參數(shù)是一個對象，就會調(diào)用該對象的 toString 方法，將其轉(zhuǎn)為字符串，然后才生成一個 Symbol 值
注意， Symbol 函數(shù)的參數(shù)只是表示對當前 Symbol 值的描述，因此相同參數(shù)的 Symbol 函數(shù)的返回值是不相等的。
// 沒有參數(shù)的情況 let s1 = Symbol(); let s2 = Symbol(); s1 === s2 // false // 有參數(shù)的情況 let s1 = Symbol('foo'); let s2 = Symbol('foo'); s1 === s2 // false上面代碼中， s1 和 s2 都是 Symbol 函數(shù)的返回值，而且參數(shù)相同，但是它們是不相等的。
Symbol 值不能與其他類型的值進行運算，會報錯。
但是，Symbol 值可以顯式轉(zhuǎn)為字符串
let sym = Symbol('My symbol'); String(sym) // 'Symbol(My symbol)' sym.toString() // 'Symbol(My symbol)'另外，Symbol 值也可以轉(zhuǎn)為布爾值，但是不能轉(zhuǎn)為數(shù)值
let sym = Symbol(); Boolean(sym) // true !sym // false if (sym) { // ... } Number(sym) // TypeError sym + 2 // TypeError2. 作為屬性名的 Symbol
由于每一個 Symbol 值都是不相等的，這意味著 Symbol 值可以作為標識符，用于對象的屬性名，就能保證不會出現(xiàn)同名的屬性。這對于一個對象由多個
模塊構(gòu)成的情況非常有用，能防止某一個鍵被不小心改寫或覆蓋。
上面代碼通過方括號結(jié)構(gòu)和 Object.defineProperty ，將對象的屬性名指定為一個 Symbol 值。
注意，Symbol 值作為對象屬性名時，不能用點運算符。
上面代碼中，因為點運算符后面總是字符串，所以不會讀取 mySymbol 作為標識名所指代的那個值，導(dǎo)致 a 的屬性名實際上是一個字符串，而不是一個
Symbol 值。
同理，在對象的內(nèi)部，使用 Symbol 值定義屬性時，Symbol 值必須放在方括號之中。
上面代碼中，如果 s 不放在方括號中，該屬性的鍵名就是字符串 s ，而不是 s 所代表的那個 Symbol 值。
采用增強的對象寫法，上面代碼的 obj 對象可以寫得更簡潔一些
Symbol 類型還可以用于定義一組常量，保證這組常量的值都是不相等的。
log.levels = { DEBUG: Symbol('debug'), INFO: Symbol('info'), WARN: Symbol('warn') }; log(log.levels.DEBUG, 'debug message'); log(log.levels.INFO, 'info message');下面是另外一個例子。
const COLOR_RED = Symbol(); const COLOR_GREEN = Symbol(); function getComplement(color) { switch (color) { case COLOR_RED: return COLOR_GREEN; case COLOR_GREEN: return COLOR_RED; default: throw new Error('Undefined color'); } }常量使用 Symbol 值最大的好處，就是其他任何值都不可能有相同的值了，因此可以保證上面的 switch 語句會按設(shè)計的方式工作。
還有一點需要注意，Symbol 值作為屬性名時，該屬性還是公開屬性，不是私有屬性
3. 實例：消除魔術(shù)字符串
魔術(shù)字符串指的是，在代碼之中多次出現(xiàn)、與代碼形成強耦合的某一個具體的字符串或者數(shù)值。風(fēng)格良好的代碼，應(yīng)該盡量消除魔術(shù)字符串，改由含義清
晰的變量代替
上面代碼中，字符串 Triangle 就是一個魔術(shù)字符串。它多次出現(xiàn)，與代碼形成“強耦合”，不利于將來的修改和維護。
常用的消除魔術(shù)字符串的方法，就是把它寫成一個變量
上面代碼中，我們把 Triangle 寫成 shapeType 對象的 triangle 屬性，這樣就消除了強耦合。
如果仔細分析，可以發(fā)現(xiàn) shapeType.triangle 等于哪個值并不重要，只要確保不會跟其他 shapeType 屬性的值沖突即可。因此，這里就很適合改用
Symbol 值。
上面代碼中，除了將 shapeType.triangle 的值設(shè)為一個 Symbol，其他地方都不用修改。
4. 屬性名的遍歷
Symbol 作為屬性名，該屬性不會出現(xiàn)在 for...in 、 for...of 循環(huán)中，也不會被 Object.keys() 、 Object.getOwnPropertyNames() 、
JSON.stringify() 返回。但是，它也不是私有屬性，有一個 Object.getOwnPropertySymbols 方法，可以獲取指定對象的所有 Symbol 屬性名
Object.getOwnPropertySymbols 方法返回一個數(shù)組，成員是當前對象的所有用作屬性名的 Symbol 值
const obj = {}; let a = Symbol('a'); let b = Symbol('b'); obj[a] = 'Hello'; obj[b] = 'World'; const objectSymbols = Object.getOwnPropertySymbols(obj); objectSymbols // [Symbol(a), Symbol(b)]下面是另一個例子， Object.getOwnPropertySymbols 方法與 for...in 循環(huán)、 Object.getOwnPropertyNames 方法進行對比的例子
const obj = {}; let foo = Symbol("foo"); Object.defineProperty(obj, foo, { value: "foobar", }); for (let i in obj) { console.log(i); // 無輸出 } Object.getOwnPropertyNames(obj) // [] Object.getOwnPropertySymbols(obj) // [Symbol(foo)]?上面代碼中，使用 Object.getOwnPropertyNames 方法得不到 Symbol 屬性名，需要使用 Object.getOwnPropertySymbols 方法。
另一個新的 API， Reflect.ownKeys 方法可以返回所有類型的鍵名，包括常規(guī)鍵名和 Symbol 鍵名。
由于以 Symbol 值作為名稱的屬性，不會被常規(guī)方法遍歷得到。我們可以利用這個特性，為對象定義一些非私有的、但又希望只用于內(nèi)部的方法。
let size = Symbol('size'); class Collection { constructor() { this[size] = 0; } add(item) { this[this[size]] = item; this[size]++; } static sizeOf(instance) { return instance[size]; } } let x = new Collection(); Collection.sizeOf(x) // 0 x.add('foo'); Collection.sizeOf(x) // 1 Object.keys(x) // ['0'] Object.getOwnPropertyNames(x) // ['0'] Object.getOwnPropertySymbols(x) // [Symbol(size)]上面代碼中，對象 x 的 size 屬性是一個 Symbol 值，所以 Object.keys(x) 、 Object.getOwnPropertyNames(x) 都無法獲取它。這就造成了一種非私有
的內(nèi)部方法的效果。
5. Symbol.for()，Symbol.keyFor()
有時，我們希望重新使用同一個 Symbol 值， Symbol.for 方法可以做到這一點。它接受一個字符串作為參數(shù)，然后搜索有沒有以該參數(shù)作為名稱的
Symbol 值。如果有，就返回這個 Symbol 值，否則就新建并返回一個以該字符串為名稱的 Symbol 值。
上面代碼中， s1 和 s2 都是 Symbol 值，但是它們都是同樣參數(shù)的 Symbol.for 方法生成的，所以實際上是同一個值。
Symbol.for() 與 Symbol() 這兩種寫法，都會生成新的 Symbol。它們的區(qū)別是，前者會被登記在全局環(huán)境中供搜索，后者不會。 Symbol.for() 不會每
次調(diào)用就返回一個新的 Symbol 類型的值，而是會先檢查給定的 key 是否已經(jīng)存在，如果不存在才會新建一個值。比如，如果你調(diào)用
Symbol.for("cat") 30 次，每次都會返回同一個 Symbol 值，但是調(diào)用 Symbol("cat") 30 次，會返回 30 個不同的 Symbol 值。
上面代碼中，由于 Symbol() 寫法沒有登記機制，所以每次調(diào)用都會返回一個不同的值。
Symbol.keyFor 方法返回一個已登記的 Symbol 類型值的 key 。
上面代碼中，變量 s2 屬于未登記的 Symbol 值，所以返回 undefined 。
需要注意的是， Symbol.for 為 Symbol 值登記的名字，是全局環(huán)境的，可以在不同的 iframe 或 service worker 中取到同一個值
?上面代碼中，iframe 窗口生成的 Symbol 值，可以在主頁面得到
6. 實例：模塊的 Singleton 模式
Singleton 模式指的是調(diào)用一個類，任何時候返回的都是同一個實例。
對于 Node 來說，模塊文件可以看成是一個類。怎么保證每次執(zhí)行這個模塊文件，返回的都是同一個實例呢？
很容易想到，可以把實例放到頂層對象 global
然后，加載上面的 mod.js
const a = require('./mod.js'); console.log(a.foo);上面代碼中，變量 a 任何時候加載的都是 A 的同一個實例。
但是，這里有一個問題，全局變量 global._foo 是可寫的，任何文件都可以修改。
const a = require('./mod.js'); global._foo = 123;上面的代碼，會使得別的腳本加載 mod.js 都失真。
為了防止這種情況出現(xiàn)，我們就可以使用 Symbol
上面代碼中，可以保證 global[FOO_KEY] 不會被無意間覆蓋，但還是可以被改寫
const a = require('./mod.js'); global[Symbol.for('foo')] = 123;如果鍵名使用 Symbol 方法生成，那么外部將無法引用這個值，當然也就無法改寫
// mod.js const FOO_KEY = Symbol('foo'); // 后面代碼相同 ……上面代碼將導(dǎo)致其他腳本都無法引用 FOO_KEY 。但這樣也有一個問題，就是如果多次執(zhí)行這個腳本，每次得到的 FOO_KEY 都是不一樣的。雖然 Node 會將
腳本的執(zhí)行結(jié)果緩存，一般情況下，不會多次執(zhí)行同一個腳本，但是用戶可以手動清除緩存，所以也不是完全可靠。
7. 內(nèi)置的 Symbol 值
除了定義自己使用的 Symbol 值以外，ES6 還提供了 11 個內(nèi)置的 Symbol 值，指向語言內(nèi)部使用的方法
7.1Symbol.hasInstance
對象的 Symbol.hasInstance 屬性，指向一個內(nèi)部方法。當其他對象使用 instanceof 運算符，判斷是否為該對象的實例時，會調(diào)用這個方法。比如， foo
instanceof Foo 在語言內(nèi)部，實際調(diào)用的是 Foo[Symbol.hasInstance](foo) 。
上面代碼中， MyClass 是一個類， new MyClass() 會返回一個實例。該實例的 Symbol.hasInstance 方法，會在進行 instanceof 運算時自動調(diào)用，判斷左
側(cè)的運算子是否為 Array 的實例。
下面是另一個例子
7.2Symbol.isConcatSpreadable
對象的 Symbol.isConcatSpreadable 屬性等于一個布爾值，表示該對象用于 Array.prototype.concat() 時，是否可以展開。
let arr1 = ['c', 'd']; ['a', 'b'].concat(arr1, 'e') // ['a', 'b', 'c', 'd', 'e'] arr1[Symbol.isConcatSpreadable] // undefined let arr2 = ['c', 'd']; arr2[Symbol.isConcatSpreadable] = false; ['a', 'b'].concat(arr2, 'e') // ['a', 'b', ['c','d'], 'e']上面代碼說明，數(shù)組的默認行為是可以展開， Symbol.isConcatSpreadable 默認等于 undefined 。該屬性等于 true 時，也有展開的效果。
類似數(shù)組的對象正好相反，默認不展開。它的 Symbol.isConcatSpreadable 屬性設(shè)為 true ，才可以展開
Symbol.isConcatSpreadable 屬性也可以定義在類里面
class A1 extends Array { constructor(args) { super(args); this[Symbol.isConcatSpreadable] = true; } } class A2 extends Array { constructor(args) { super(args); } get [Symbol.isConcatSpreadable] () { return false; } } let a1 = new A1(); a1[0] = 3; a1[1] = 4; let a2 = new A2(); a2[0] = 5; a2[1] = 6; [1, 2].concat(a1).concat(a2) // [1, 2, 3, 4, [5, 6]]上面代碼中，類 A1 是可展開的，類 A2 是不可展開的，所以使用 concat 時有不一樣的結(jié)果。
注意， Symbol.isConcatSpreadable 的位置差異， A1 是定義在實例上， A2 是定義在類本身，效果相同。
7.3Symbol.species
對象的 Symbol.species 屬性，指向當前對象的構(gòu)造函數(shù)。創(chuàng)造實例時，默認會調(diào)用這個方法，即使用這個屬性返回的函數(shù)當作構(gòu)造函數(shù)，來創(chuàng)造新的實例
對象。
上面代碼中，子類 MyArray 繼承了父類 Array 。創(chuàng)建 MyArray 的實例對象時，本來會調(diào)用它自己的構(gòu)造函數(shù)（本例中被省略了），但是由于定義了
Symbol.species 屬性，所以會使用這個屬性返回的的函數(shù)，創(chuàng)建 MyArray 的實例。
這個例子也說明，定義 Symbol.species 屬性要采用 get 讀取器。默認的 Symbol.species 屬性等同于下面的寫法。
下面是一個例子。
class MyArray extends Array { static get [Symbol.species]() { return Array; } } let a = new MyArray(1,2,3); let mapped = a.map(x => x * x); mapped instanceof MyArray // false mapped instanceof Array // true上面代碼中，由于構(gòu)造函數(shù)被替換成了 Array 。所以， mapped 對象不是 MyArray 的實例，而是 Array 的實例。
7.4Symbol.match
對象的 Symbol.match 屬性，指向一個函數(shù)。當執(zhí)行 str.match(myObject) 時，如果該屬性存在，會調(diào)用它，返回該方法的返回值
String.prototype.match(regexp) // 等同于 regexp[Symbol.match](this) class MyMatcher { [Symbol.match](string) { return 'hello world'.indexOf(string); } } 'e'.match(new MyMatcher()) // 17.5Symbol.replace
對象的 Symbol.replace 屬性，指向一個方法，當該對象被 String.prototype.replace 方法調(diào)用時，會返回該方法的返回值
String.prototype.replace(searchValue, replaceValue) // 等同于 searchValue[Symbol.replace](this, replaceValue)下面是一個例子。
const x = {}; x[Symbol.replace] = (...s) => console.log(s); 'Hello'.replace(x, 'World') // ["Hello", "World"]?Symbol.replace 方法會收到兩個參數(shù)，第一個參數(shù)是 replace 方法正在作用的對象，上面例子是 Hello ，第二個參數(shù)是替換后的值，上面例子是 World
7.6Symbol.search
對象的 Symbol.search 屬性，指向一個方法，當該對象被 String.prototype.search 方法調(diào)用時，會返回該方法的返回值。
String.prototype.search(regexp) // 等同于 regexp[Symbol.search](this) class MySearch { constructor(value) { this.value = value; } [Symbol.search](string) { return string.indexOf(this.value); } } 'foobar'.search(new MySearch('foo')) // 07.7Symbol.split
對象的 Symbol.split 屬性，指向一個方法，當該對象被 String.prototype.split 方法調(diào)用時，會返回該方法的返回值
String.prototype.split(separator, limit) // 等同于 separator[Symbol.split](this, limit)下面是一個例子。
class MySplitter { constructor(value) { this.value = value; } [Symbol.split](string) { let index = string.indexOf(this.value); if (index === -1) { return string; } return [ string.substr(0, index), string.substr(index + this.value.length) ]; } } 'foobar'.split(new MySplitter('foo')) // ['', 'bar'] 'foobar'.split(new MySplitter('bar')) // ['foo', ''] 'foobar'.split(new MySplitter('baz')) // 'foobar'上面方法使用 Symbol.split 方法，重新定義了字符串對象的 split 方法的行為，
7.8Symbol.iterator
Symbol.iterator
const myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable] // [1, 2, 3]對象進行 for...of 循環(huán)時，會調(diào)用 Symbol.iterator 方法，返回該對象的默認遍歷器
class Collection { *[Symbol.iterator]() { let i = 0; while(this[i] !== undefined) { yield this[i]; ++i; } } } let myCollection = new Collection(); myCollection[0] = 1; myCollection[1] = 2; for(let value of myCollection) { console.log(value); } // 1 // 27.9Symbol.toPrimitive
對象的 Symbol.toPrimitive 屬性，指向一個方法。該對象被轉(zhuǎn)為原始類型的值時，會調(diào)用這個方法，返回該對象對應(yīng)的原始類型值。
Symbol.toPrimitive 被調(diào)用時，會接受一個字符串參數(shù)，表示當前運算的模式，一共有三種模式。
Number：該場合需要轉(zhuǎn)成數(shù)值
String：該場合需要轉(zhuǎn)成字符串
Default：該場合可以轉(zhuǎn)成數(shù)值，也可以轉(zhuǎn)成字符串
7.10Symbol.toStringTag
對象的 Symbol.toStringTag 屬性，指向一個方法。在該對象上面調(diào)用 Object.prototype.toString 方法時，如果這個屬性存在，它的返回值會出現(xiàn)在
toString 方法返回的字符串之中，表示對象的類型。也就是說，這個屬性可以用來定制 [object Object] 或 [object Array] 中 object 后面的那個字符
串。
ES6 新增內(nèi)置對象的 Symbol.toStringTag 屬性值如下。
JSON[Symbol.toStringTag] ：'JSON'
Math[Symbol.toStringTag] ：'Math'
Module 對象 M[Symbol.toStringTag] ：'Module'
ArrayBuffer.prototype[Symbol.toStringTag] ：'ArrayBuffer'
DataView.prototype[Symbol.toStringTag] ：'DataView'
Map.prototype[Symbol.toStringTag] ：'Map'
Promise.prototype[Symbol.toStringTag] ：'Promise'
Set.prototype[Symbol.toStringTag] ：'Set'
%TypedArray%.prototype[Symbol.toStringTag] ：'Uint8Array'等
WeakMap.prototype[Symbol.toStringTag] ：'WeakMap'
WeakSet.prototype[Symbol.toStringTag] ：'WeakSet'
%MapIteratorPrototype%[Symbol.toStringTag] ：'Map Iterator'
%SetIteratorPrototype%[Symbol.toStringTag] ：'Set Iterator'
%StringIteratorPrototype%[Symbol.toStringTag] ：'String Iterator'
Symbol.prototype[Symbol.toStringTag] ：'Symbol'
Generator.prototype[Symbol.toStringTag] ：'Generator'
GeneratorFunction.prototype[Symbol.toStringTag] ：'GeneratorFunction'
7.11Symbol.unscopables
對象的 Symbol.unscopables 屬性，指向一個對象。該對象指定了使用 with 關(guān)鍵字時，哪些屬性會被 with 環(huán)境排除。
Array.prototype[Symbol.unscopables] // { // copyWithin: true, // entries: true, // fill: true, // find: true, // findIndex: true, // includes: true, // keys: true // } Object.keys(Array.prototype[Symbol.unscopables]) // ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'includes', 'keys']上面代碼說明，數(shù)組有 7 個屬性，會被 with 命令排除。
// 沒有 unscopables 時 class MyClass { foo() { return 1; } } var foo = function () { return 2; }; with (MyClass.prototype) { foo(); // 1 } // 有 unscopables 時 class MyClass { foo() { return 1; } get [Symbol.unscopables]() { return { foo: true }; } } var foo = function () { return 2; }; with (MyClass.prototype) { foo(); // 2 }上面代碼通過指定 Symbol.unscopables 屬性，使得 with 語法塊不會在當前作用域?qū)ふ?foo 屬性，即 foo 將指向外層作用域的變量
總結(jié)
本博客源于本人閱讀相關(guān)書籍和視頻總結(jié)，創(chuàng)作不易，謝謝點贊支持。學(xué)到就是賺到。我是歌謠，勵志成為一名優(yōu)秀的技術(shù)革新人員。
歡迎私信交流，一起學(xué)習(xí)，一起成長。
推薦鏈接 其他文件目錄參照
“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）
總結(jié)
以上是生活随笔為你收集整理的“睡服”面试官系列第十六篇之Symbol（建议收藏学习）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RIA技术
- 下一篇： js原生简单生成卡密例子