1、概述
ES5的對象屬性名都是字符串,這容易造成屬性名的沖突。比如,你使用了一個他人提供的對象,但又想為這個對象添加新的方法(mixin模式),新方法的名字就有可能與現有方法產生沖突。如果有一種機制,保證每個屬性的名字都是獨一無二的就好了,這樣就從根本上防止屬性名的沖突。這就是ES6引入Symbol的原因。
ES6引入了一種新的原始數據類型Symbol,表示獨一無二的值。它是JavaScript語言的第七種數據類型,前六種是:Undefined、Null、布爾值(Boolean)、字符串(String)、數值(Number)、對象(Object)。
Symbol值通過Symbol
函數生成。這就是說,對象的屬性名現在可以有兩種類型,一種是原來就有的字符串,另一種就是新增的Symbol類型。凡是屬性名屬於Symbol類型,就都是獨一無二的,可以保證不會與其他屬性名產生沖突。
let s = Symbol(); typeof s // "symbol"
上面代碼中,變量s
就是一個獨一無二的值。typeof
運算符的結果,表明變量s
是Symbol數據類型,而不是字符串之類的其他類型。
注意,Symbol
函數前不能使用new
命令,否則會報錯。這是因為生成的Symbol是一個原始類型的值,不是對象。也就是說,由於Symbol值不是對象,所以不能添加屬性。基本上,它是一種類似於字符串的數據類型。
Symbol
函數可以接受一個字符串作為參數,表示對Symbol實例的描述,主要是為了在控制台顯示,或者轉為字符串時,比較容易區分。
var s1 = Symbol('foo'); var s2 = Symbol('bar'); s1 // Symbol(foo) s2 // Symbol(bar) s1.toString() // "Symbol(foo)" s2.toString() // "Symbol(bar)"
上面代碼中,s1
和s2
是兩個Symbol值。如果不加參數,它們在控制台的輸出都是Symbol()
,不利於區分。有了參數以后,就等於為它們加上了描述,輸出的時候就能夠分清,到底是哪一個值。
注意,Symbol
函數的參數只是表示對當前Symbol值的描述,因此相同參數的Symbol
函數的返回值是不相等的。
// 沒有參數的情況 var s1 = Symbol(); var s2 = Symbol(); s1 === s2 // false // 有參數的情況 var s1 = Symbol("foo"); var s2 = Symbol("foo"); s1 === s2 // false
上面代碼中,s1
和s2
都是Symbol
函數的返回值,而且參數相同,但是它們是不相等的。
Symbol值不能與其他類型的值進行運算,會報錯。
var sym = Symbol('My symbol'); "your symbol is " + sym // TypeError: can't convert symbol to string `your symbol is ${sym}` // TypeError: can't convert symbol to string
但是,Symbol值可以顯式轉為字符串。
var sym = Symbol('My symbol'); String(sym) // 'Symbol(My symbol)' sym.toString() // 'Symbol(My symbol)'
另外,Symbol值也可以轉為布爾值,但是不能轉為數值。
var sym = Symbol(); Boolean(sym) // true !sym // false if (sym) { // ... } Number(sym) // TypeError sym + 2 // TypeError
2、作為屬性名的Symbol
由於每一個Symbol值都是不相等的,這意味着Symbol值可以作為標識符,用於對象的屬性名,就能保證不會出現同名的屬性。這對於一個對象由多個模塊構成的情況非常有用,能防止某一個鍵被不小心改寫或覆蓋。
var mySymbol = Symbol(); // 第一種寫法 var a = {}; a[mySymbol] = 'Hello!'; // 第二種寫法 var a = { [mySymbol]: 'Hello!' }; // 第三種寫法 var a = {}; Object.defineProperty(a, mySymbol, { value: 'Hello!' }); // 以上寫法都得到同樣結果 a[mySymbol] // "Hello!"
上面代碼通過方括號結構和Object.defineProperty
,將對象的屬性名指定為一個Symbol值。
注意,Symbol值作為對象屬性名時,不能用點運算符。
var mySymbol = Symbol(); var a = {}; a.mySymbol = 'Hello!'; a[mySymbol] // undefined a['mySymbol'] // "Hello!"
上面代碼中,因為點運算符后面總是字符串,所以不會讀取mySymbol
作為標識名所指代的那個值,導致a
的屬性名實際上是一個字符串,而不是一個Symbol值。
同理,在對象的內部,使用Symbol值定義屬性時,Symbol值必須放在方括號之中。
let s = Symbol(); let obj = { [s]: function (arg) { ... } }; obj[s](123);
上面代碼中,如果s
不放在方括號中,該屬性的鍵名就是字符串s
,而不是s
所代表的那個Symbol值。
采用增強的對象寫法,上面代碼的obj
對象可以寫得更簡潔一些。
let obj = {
[s](arg) { ... }
};
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
語句會按設計的方式工作。
還有一點需要注意,Symbol值作為屬性名時,該屬性還是公開屬性,不是私有屬性。
3、實例:消除魔術字符串
魔術字符串指的是,在代碼之中多次出現、與代碼形成強耦合的某一個具體的字符串或者數值。風格良好的代碼,應該盡量消除魔術字符串,該由含義清晰的變量代替。
function getArea(shape, options) { var area = 0; switch (shape) { case 'Triangle': // 魔術字符串 area = .5 * options.width * options.height; break; /* ... more code ... */ } return area; } getArea('Triangle', { width: 100, height: 100 }); // 魔術字符串
上面代碼中,字符串“Triangle”就是一個魔術字符串。它多次出現,與代碼形成“強耦合”,不利於將來的修改和維護。
常用的消除魔術字符串的方法,就是把它寫成一個變量。
var shapeType = { triangle: 'Triangle' }; function getArea(shape, options) { var area = 0; switch (shape) { case shapeType.triangle: area = .5 * options.width * options.height; break; } return area; } getArea(shapeType.triangle, { width: 100, height: 100 });
上面代碼中,我們把“Triangle”寫成shapeType
對象的triangle
屬性,這樣就消除了強耦合。
如果仔細分析,可以發現shapeType.triangle
等於哪個值並不重要,只要確保不會跟其他shapeType
屬性的值沖突即可。因此,這里就很適合改用Symbol值。
const shapeType = { triangle: Symbol() };
上面代碼中,除了將shapeType.triangle
的值設為一個Symbol,其他地方都不用修改。
4、屬性名的遍歷
Symbol作為屬性名,該屬性不會出現在for...in
、for...of
循環中,也不會被Object.keys()
、Object.getOwnPropertyNames()
返回。但是,它也不是私有屬性,有一個Object.getOwnPropertySymbols
方法,可以獲取指定對象的所有Symbol屬性名。
Object.getOwnPropertySymbols
方法返回一個數組,成員是當前對象的所有用作屬性名的Symbol值。
var obj = {}; var a = Symbol('a'); var b = Symbol('b'); obj[a] = 'Hello'; obj[b] = 'World'; var objectSymbols = Object.getOwnPropertySymbols(obj); objectSymbols // [Symbol(a), Symbol(b)]
下面是另一個例子,Object.getOwnPropertySymbols
方法與for...in
循環、Object.getOwnPropertyNames
方法進行對比的例子。
var obj = {}; var foo = Symbol("foo"); Object.defineProperty(obj, foo, { value: "foobar", }); for (var i in obj) { console.log(i); // 無輸出 } Object.getOwnPropertyNames(obj) // [] Object.getOwnPropertySymbols(obj) // [Symbol(foo)]
上面代碼中,使用Object.getOwnPropertyNames
方法得不到Symbol
屬性名,需要使用Object.getOwnPropertySymbols
方法。
另一個新的API,Reflect.ownKeys
方法可以返回所有類型的鍵名,包括常規鍵名和Symbol鍵名。
let obj = { [Symbol('my_key')]: 1, enum: 2, nonEnum: 3 }; Reflect.ownKeys(obj) // [Symbol(my_key), 'enum', 'nonEnum']
由於以Symbol值作為名稱的屬性,不會被常規方法遍歷得到。我們可以利用這個特性,為對象定義一些非私有的、但又希望只用於內部的方法。
var size = Symbol('size'); class Collection { constructor() { this[size] = 0; } add(item) { this[this[size]] = item; this[size]++; } static sizeOf(instance) { return instance[size]; } } var 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)
都無法獲取它。這就造成了一種非私有的內部方法的效果。
5、Symbol.for(),Symbol.keyFor()
有時,我們希望重新使用同一個Symbol值,Symbol.for
方法可以做到這一點。它接受一個字符串作為參數,然后搜索有沒有以該參數作為名稱的Symbol值。如果有,就返回這個Symbol值,否則就新建並返回一個以該字符串為名稱的Symbol值。
var s1 = Symbol.for('foo'); var s2 = Symbol.for('foo'); s1 === s2 // true
上面代碼中,s1和s2都是Symbol值,但是它們都是同樣參數的Symbol.for
方法生成的,所以實際上是同一個值。
Symbol.for()
與Symbol()
這兩種寫法,都會生成新的Symbol。它們的區別是,前者會被登記在全局環境中供搜索,后者不會。Symbol.for()
不會每次調用就返回一個新的Symbol類型的值,而是會先檢查給定的key是否已經存在,如果不存在才會新建一個值。比如,如果你調用Symbol.for("cat")
30次,每次都會返回同一個Symbol值,但是調用Symbol("cat")
30次,會返回30個不同的Symbol值。
Symbol.for("bar") === Symbol.for("bar") // true Symbol("bar") === Symbol("bar") // false
上面代碼中,由於Symbol()
寫法沒有登記機制,所以每次調用都會返回一個不同的值。
Symbol.keyFor方法返回一個已登記的Symbol類型值的key。
var s1 = Symbol.for("foo"); Symbol.keyFor(s1) // "foo" var s2 = Symbol("foo"); Symbol.keyFor(s2) // undefined
上面代碼中,變量s2
屬於未登記的Symbol值,所以返回undefined
。
需要注意的是,Symbol.for
為Symbol值登記的名字,是全局環境的,可以在不同的iframe或service worker中取到同一個值。
iframe = document.createElement('iframe'); iframe.src = String(window.location); document.body.appendChild(iframe); iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo') // true
上面代碼中,iframe窗口生成的Symbol值,可以在主頁面得到。
6、實例:模塊的 Singleton 模式
Singleton模式指的是調用一個類,任何時候返回的都是同一個實例。
對於Node來說,模塊文件可以看成是一個類。怎么保證每次執行這個模塊文件,返回的都是同一個實例呢?
很容易想到,可以把實例放到頂層對象global
。
// mod.js function A() { this.foo = 'hello'; } if (!global._foo) { global._foo = new A(); } module.exports = global._foo;
然后,加載上面的mod.js
。
var a = require('./mod.js'); console.log(a.foo);
上面代碼中,變量a
任何時候加載的都是A
的同一個實例。
但是,這里有一個問題,全局變量global._foo
是可寫的,任何文件都可以修改。
var a = require('./mod.js'); global._foo = 123;
上面的代碼,會使得別的腳本加載mod.js
都失真。
為了防止這種情況出現,我們就可以使用Symbol。
// mod.js const FOO_KEY = Symbol.for('foo'); function A() { this.foo = 'hello'; } if (!global[FOO_KEY]) { global[FOO_KEY] = new A(); } module.exports = global[FOO_KEY];
上面代碼中,可以保證global[FOO_KEY]
不會被無意間覆蓋,但還是可以被改寫。
var a = require('./mod.js'); global[Symbol.for('foo')] = 123;
如果鍵名使用Symbol
方法生成,那么外部將無法引用這個值,當然也就無法改寫。
```javascript // mod.js const FOO_KEY = Symbol('foo'); // 后面代碼相同 ……
上面代碼將導致其他腳本都無法引用FOO_KEY
。但這樣也有一個問題,就是如果多次執行這個腳本,每次得到的FOO_KEY
都是不一樣的。雖然Node會將腳本的執行結果緩存,一般情況下,不會多次執行同一個腳本,但是用戶可以手動清除緩存,所以也不是完全可靠。
7、內置的Symbol值
除了定義自己使用的Symbol值以外,ES6還提供了11個內置的Symbol值,指向語言內部使用的方法。
Symbol.hasInstance
對象的Symbol.hasInstance
屬性,指向一個內部方法。當其他對象使用instanceof
運算符,判斷是否為該對象的實例時,會調用這個方法。比如,foo instanceof Foo
在語言內部,實際調用的是Foo[Symbol.hasInstance](foo)
。
class MyClass { [Symbol.hasInstance](foo) { return foo instanceof Array; } } [1, 2, 3] instanceof new MyClass() // true
上面代碼中,MyClass
是一個類,new MyClass()
會返回一個實例。該實例的Symbol.hasInstance
方法,會在進行instanceof
運算時自動調用,判斷左側的運算子是否為Array
的實例。
下面是另一個例子。
class Even { static [Symbol.hasInstance](obj) { return Number(obj) % 2 === 0; } } 1 instanceof Even // false 2 instanceof Even // true 12345 instanceof Even // false
Symbol.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']
上面代碼說明,數組的默認行為是可以展開。Symbol.isConcatSpreadable
屬性等於true
或undefined
,都有這個效果。
類似數組的對象也可以展開,但它的Symbol.isConcatSpreadable
屬性默認為false
,必須手動打開。
let obj = {length: 2, 0: 'c', 1: 'd'}; ['a', 'b'].concat(obj, 'e') // ['a', 'b', obj, 'e'] obj[Symbol.isConcatSpreadable] = true; ['a', 'b'].concat(obj, 'e') // ['a', 'b', 'c', 'd', 'e']
對於一個類來說,Symbol.isConcatSpreadable
屬性必須寫成實例的屬性。
class A1 extends Array { constructor(args) { super(args); this[Symbol.isConcatSpreadable] = true; } } class A2 extends Array { constructor(args) { super(args); this[Symbol.isConcatSpreadable] = 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
時有不一樣的結果。
Symbol.species
對象的Symbol.species
屬性,指向一個方法。該對象作為構造函數創造實例時,會調用這個方法。即如果this.constructor[Symbol.species]
存在,就會使用這個屬性作為構造函數,來創造新的實例對象。
Symbol.species
屬性默認的讀取器如下。
static get [Symbol.species]() { return this; }
Symbol.match
對象的Symbol.match
屬性,指向一個函數。當執行str.match(myObject)
時,如果該屬性存在,會調用它,返回該方法的返回值。
String.prototype.match(regexp) // 等同於 regexp[Symbol.match](this) class MyMatcher { [Symbol.match](string) { return 'hello world'.indexOf(string); } } 'e'.match(new MyMatcher()) // 1
Symbol.replace
對象的Symbol.replace
屬性,指向一個方法,當該對象被String.prototype.replace
方法調用時,會返回該方法的返回值。
String.prototype.replace(searchValue, replaceValue) // 等同於 searchValue[Symbol.replace](this, replaceValue)
Symbol.search
對象的Symbol.search
屬性,指向一個方法,當該對象被String.prototype.search
方法調用時,會返回該方法的返回值。
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')) // 0
Symbol.split
對象的Symbol.split
屬性,指向一個方法,當該對象被String.prototype.split
方法調用時,會返回該方法的返回值。
String.prototype.split(separator, limit) // 等同於 separator[Symbol.split](this, limit)
Symbol.iterator
對象的Symbol.iterator
屬性,指向該對象的默認遍歷器方法。
var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myIterable] // [1, 2, 3]
對象進行for...of
循環時,會調用Symbol.iterator
方法,返回該對象的默認遍歷器,詳細介紹參見《Iterator和for...of循環》一章。
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 // 2
Symbol.toPrimitive
對象的Symbol.toPrimitive
屬性,指向一個方法。該對象被轉為原始類型的值時,會調用這個方法,返回該對象對應的原始類型值。
Symbol.toPrimitive
被調用時,會接受一個字符串參數,表示當前運算的模式,一共有三種模式。
- Number:該場合需要轉成數值
- String:該場合需要轉成字符串
- Default:該場合可以轉成數值,也可以轉成字符串
let obj = { [Symbol.toPrimitive](hint) { switch (hint) { case 'number': return 123; case 'string': return 'str'; case 'default': return 'default'; default: throw new Error(); } } }; 2 * obj // 246 3 + obj // '3default' obj == 'default' // true String(obj) // 'str'
Symbol.toStringTag
對象的Symbol.toStringTag
屬性,指向一個方法。在該對象上面調用Object.prototype.toString
方法時,如果這個屬性存在,它的返回值會出現在toString
方法返回的字符串之中,表示對象的類型。也就是說,這個屬性可以用來定制[object Object]
或[object Array]
中object后面的那個字符串。
({[Symbol.toStringTag]: 'Foo'}.toString()) // "[object Foo]" class Collection { get [Symbol.toStringTag]() { return 'xxx'; } } var x = new Collection(); Object.prototype.toString.call(x) // "[object xxx]"
ES6新增內置對象的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'
Symbol.unscopables
對象的Symbol.unscopables
屬性,指向一個對象。該對象指定了使用with
關鍵字時,哪些屬性會被with
環境排除。
Array.prototype[Symbol.unscopables] // { // copyWithin: true, // entries: true, // fill: true, // find: true, // findIndex: true, // keys: true // } Object.keys(Array.prototype[Symbol.unscopables]) // ['copyWithin', 'entries', 'fill', 'find', 'findIndex', 'keys']
上面代碼說明,數組有6個屬性,會被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 }