1 概述
ES的對象屬性名都是字符串,容易造成屬性名的衝突。比如,你使用了他人提供的對象,但又想爲這個對象添加新的方法,新方法的名字就有可能與現有方法產生衝突。如果有一種機制,保證每個屬性的名字都是獨一無二的就好了,這樣就可以從根本上防止屬性名的衝突。
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實例的描述,主要是爲了在控制檯顯示,或則轉爲字符串時,比較容易區分。
let s1 = Symbol();
let s2 = Symbol('foo');
console.log(s1); // Symbol()
console.log(s2); // Symbol(foo)
上面代碼中,s1和s2是兩個Symbol值。如果不加參數,它們在控制檯的輸出都是Symbol(),不利於區分,有了參數以後,就等於爲它們加上了描述,輸出的時候就能夠分清,到底是哪一個值。
注意: Symbol函數的參數只是表示對當前Symbol值的描述,因此相同參數的Symbol函數的返回值是不相等的。
// 沒有參數的情況
let s1 = Symbol();
let s2 = Symbol();
s1 === s2 // false
// 有參數的情況
let s1 = Symbol('foo');
let s2 = Symbol('foo');
s1 === s2 // false
2 作爲屬性名的Symbol
由於每一個Symbol值都是不相等的,這意味着Symbol值可以作爲標識符,用於對象的屬性名,就能保證不會出現同名的屬性。
let mySymbol = Symbol();
// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';
// 第二種寫法
let a = {
[mySymbol]: 'Hello!'
};
// 第三種寫法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
// 以上寫法都得到同樣結果
a[mySymbol] // "Hello!"
注意Symbol值作爲對象屬性名時,不能用點運算符。
const mySymbol = Symbol();
const a = {};
a.mySymbol = 'Hello!';
a[mySymbol] // undefined
a['mySymbol'] // "Hello!"
同理,在對象的內部,使用Symbol值定義屬性時,Symbol值必須放在方括號之中。
let s = Symbol();
let obj = {
[s]: function (arg) { ... }
};
3 實例: 消除魔術字符串
魔術字符串: 在代碼之中多次出現,與代碼形成強耦合的某一個具體的字符串或則數值。風格良好的代碼,應該儘量消除魔術字符串,改由含義清晰的變量代替。
function getArea(shape, options) {
let area = 0;
switch (shape) {
case 'Triangle': // 魔術字符串
area = .5 * options.width * options.height;
break;
/* ... more code ... */
}
return area;
}
getArea('Triangle', { width: 100, height: 100 }); // 魔術字符串
上面的代碼Triangle就是一個魔術字符串。它多次出現,與代碼形成”強烈耦合”,不利於將來的修改和維護。
常用的消除魔術字符串的方法,就是把它寫成一個變量
const shapeType = {
triangle: 'Triangle'
};
function getArea(shape, options) {
let 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屬性的值衝突即可。
const shapeType = {
triangle: Symbol()
};
4 屬性名的遍歷
Symbol作爲屬性名,該屬性不會出現在for…in、for…of循環中,也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。
Object.getOwnPropertySymbols方法返回一個數組,成員是當前對象的所有用作屬性名的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循環、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)]
5 Symbol.for() , Symbol.keyFor()
有時,我們希望重新使用同一個Symbol值,Symbol.for方法可以做到這一點,它接受一個字符串作爲參數,然後搜索有沒有以該參數作爲名稱的Symbol指。如果有就返回這個Symbol值。否則就新建並返回一個以該字符串爲名稱的Symbol值。
let s1 = Symbol.for('foo');
let 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
本博客內容摘抄自
阮一峯老師寫的ECMAScript6入門一書