Symbol 是什麼?
Symbols 不是圖標,也不是指在程式碼中可以使用小圖片:
也不是指其他一些東西的語法。那麼,Symbol 到究竟是什麼呢?
七種資料型別
JavaScript 在 1997 年被標準化時,就有 6 種資料類型,直到 ES6 出現之前,程式中的變數一定是以下 6 種資料型態之一:
Undefined
Null
Boolean
Number
String
Object
每種資料型態都是一系列值的組合,前面 5 種資料型態值的數量都是有限的。 Boolean 型別只有兩個值:true 和 false,當 Boolean 類型的變數賦值時,並不會產生新的值(共用了true 和 false 這兩個值)。對於 Number 和 String 來說,它們的值則多得多了,標準的說法是有 18,437,736,874,454,810,627 個 Number 類型的值(包括 NAN)。 String 類型的數量就難以統計了,我原以為是 (2144,115,188,075,855,872 ? 1) ÷ 65,535…不過也許我算錯了。
物件值的數量是無限的,每個物件都是獨一無二的,每次開啟一個網頁,都建立了一系列的物件。
ES6 中的 Symbol 也是一種資料類型,但是不是字串,也不是對象,而是一種新的資料類型:第七種資料類型。
下面我們來看一個場景,也許 Symbol 能派上用場。
一個布林值引出的問題
有時,把一些屬於其他物件的資料暫存在另一個物件中是非常方便的。例如,假設你正在編寫一個JS 庫,使用CSS 中的transition 來讓一個DOM 元素在屏幕上飛奔,你已經知道不能同時將多個transition 應用在同一個div 上,否則將使得動畫非常不美觀,你也確實有辦法來解決這個問題,但是首先你需要知道該div 是否已經在移動中。
怎麼解決這個問題呢?
其中一個方法是使用瀏覽器提供的 API 來探測元素是否處於動畫狀態,但殺雞焉用牛刀,在將元素設為移動時,你的庫就知道了該元素正在移動。
你真正需要的是一種機制來追蹤哪些元素正在移動,你可以將正在移動的元素保存在一個陣列中,每次要為一個元素設定動畫時,首先檢查一下這個元素是否已經在這個列表中。
啊哈,但是如果你的陣列非常龐大,即便是這樣的線性搜尋也會產生效能問題。
那麼,你真正想做的就是直接在元素上設定一個標誌:
if (element.isMoving) { smoothAnimations(element); } element.isMoving = true; if (element.isMoving) { smoothAnimations(element); } element.isMoving = true;
這也有一些潛在的問題,不得不承認這樣一個事實:還有其他程式碼也可能操作該 ODM 元素。
當然,對於最後三個問題,你可以選擇一個無意義的不會有人會使用到的字串:
if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) { smoothAnimations(element); } element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true; if (element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__) { smoothAnimations(element); } element.__$jorendorff_animation_library$PLEASE_DO_NOT_USE_THIS_PROPERTY$isMoving__ = true;
這似乎太不靠譜了,看了讓人眼睛痛。
你也可以用加密演算法來產生一個幾乎唯一的字串:
// get 1024 Unicode characters of gibberish var isMoving = SecureRandom.generateName(); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true; // get 1024 Unicode characters of gibberish var isMoving = SecureRandom.generateName(); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true;
object[name] 語法允許我們將任何字串作為屬性名,程式碼能正常運作,衝突幾乎是不可能了,程式碼看起來也美觀多了。
但是,這回導致糟糕的調試體驗,每次使用console.log() 打印出包含該屬性的元素時,你回看到一個龐大的垃圾字符串,並且如果還不止一個這樣的屬性呢?每次刷新後屬性名都發生了變化,怎麼樣讓這些屬性看起來更直覺呢?
為什麼這麼難?我們只是為了保存一個小小的標誌位。
用 Symbol 來解決問題
Symbol 值可以由程式創建,並可以作為屬性名,而且不用擔心屬性名衝突。
var mySymbol = Symbol(); var mySymbol = Symbol();
调用 Symbol() 方法将创建一个新的 Symbol 类型的值,并且该值不与其它任何值相等。
与数字和字符串一样,Symbol 类型的值也可以作为对象的属性名,正是由于它不与任何其它值相等,对应的属性也不会发生冲突:
obj[mySymbol] = "ok!"; // guaranteed not to collide console.log(obj[mySymbol]); // ok! obj[mySymbol] = "ok!"; // guaranteed not to collide console.log(obj[mySymbol]); // ok!
下面是使用 Symbol 来解决上面的问题:
// create a unique symbol var isMoving = Symbol("isMoving"); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true; // create a unique symbol var isMoving = Symbol("isMoving"); ... if (element[isMoving]) { smoothAnimations(element); } element[isMoving] = true;
上面代码需要注意几点:
由于 Symbol 的设计初衷是为了避免冲突,当遍历 JavaScript 对象时,并不会枚举到以 Symbol 作为建的属性,比如,for-in 循环只会遍历到以字符串作为键的属性,Object.keys(obj)和 Object.getOwnPropertyNames(obj) 也一样,但这并不意味着 Symbol 为键的属性是不可枚举的:使用 Object.getOwnPropertySymbols(obj) 这个新方法可以枚举出来,还有 Reflect.ownKeys(obj) 这个新方法可以返回对象中所有字符串和 Symbol 键。(我将在后面的文章中详细介绍 Reflect 这个新特性。)
库和框架的设计者将会发现很多 Symbol 的用途,稍后我们将看到,JavaScript 语言本身也对其有广泛的应用。
Symbol 究竟是什么呢
> typeof Symbol() "symbol" > typeof Symbol() "symbol"
Symbol 是完全不一样的东西。一旦创建后就不可更改,不能对它们设置属性(如果在严格模式下尝试这样做,你将得到一个 TypeError)。它们可以作为属性名,这时它们和字符串的属性名没有什么区别。
另一方面,每个 Symbol 都是独一无二的,不与其它 Symbol 重复(即便是使用相同的 Symbol 描述创建),创建一个 Symbol 就跟创建一个对象一样方便。
ES6 中的 Symbol 与传统语言(如 Lisp 和 Ruby)中的 Symbol 中的类似,但并不是完全照搬到 JavaScript 中。在 Lisp 中,所有标识符都是 Symbol;在 JavaScript 中,标识符和大多数属性仍然是字符串,Symbol 只是提供了一个额外的选择。
值得注意的是:与其它类型不同的是,Symbol 不能自动被转换为字符串,当尝试将一个 Symbol 强制转换为字符串时,将返回一个 TypeError。
> var sym = Symbol("<3"); > "your symbol is " + sym // TypeError: can't convert symbol to string > `your symbol is ${sym}` // TypeError: can't convert symbol to string > var sym = Symbol("<3"); > "your symbol is " + sym // TypeError: can't convert symbol to string > `your symbol is ${sym}` // TypeError: can't convert symbol to string
應該避免這樣的強制轉換,應該使用 String(sym) 或 sym.toString() 來轉換。
取得 Symbol 的三種方法
如果你仍不確定 Symbol 是否有用,那麼接下來的內容將會非常有趣,因為我將為你示範 Symbol 的實際應用程式。
Symbol 在 ES6 規範中的應用
我們已經知道可以使用 Symbol 來避免程式碼衝突。之前在介紹iterator 時,我們也解析了for (var item of myArray) 內部是以呼叫myArray[Symbol.iterator]() 開始的,當時我提到這個方法可以使用myArray.iterator() 來代替,但使用Symbol 的後向相容性更好。
在 ES6 中還有一些地方使用到了 Symbol。 (這些特性還沒有在 FireFox 中實現。)
這些用途還比較窄,但僅僅透過我文章中的程式碼很難看到這些新特性產生的重大影響。 JavaScript 的 Symbol 是 PHP 和 Python 中 __doubleUnderscores 的改進版本,標準組織將使用它來為語言添加新特性,而不會對已有程式碼產生影響。