ES6中Symbol類型用法實例詳解
本文實例講述了ES6中的Symbol類型。分享給大家供大家參考，具體如下：
Symbol是在ES6中新加入的類型。
正如我們所知，JavaScript中有以下幾種類型：
Undefined ,Null ,Boolean ,Number ,String, Object。
但是上述類型在處理某些情況的時候是遠(yuǎn)遠(yuǎn)不夠的。下面我們來舉一個例子：
假設(shè)我們要移動div，也需要在某些情況下判斷該div是否處于移動狀態(tài)，所以我們會想到給div這類的對象設(shè)置一個屬性。
if (element.isMoving) {
smoothAnimations(element);
}
element.isMoving = true;
但是這樣會存在一些問題，比如：
我們可能和第三方的庫沖突；
我們可能和未來的標(biāo)準(zhǔn)沖突等。
于是可以采用第二種方法，也就是采用加密函數(shù)，制定一個值：
var isMoving = SecureRandom.generateName();
...
if (element[isMoving]) {
smoothAnimations(element);
}
element[isMoving] = true;
這樣確實解決了沖突問題，但卻帶來了調(diào)試問題，我們每次查看該對象屬性時都會看見一大堆垃圾命名。
于是為了解決沖突問題，ES6提出了Symbol這樣的新類型。
Symbol是一種特殊的、不可變的數(shù)據(jù)類型，可以作為對象屬性的標(biāo)識符使用。我們看demo：
var sym1 = Symbol();
var sym2 = Symbol("foo");
var sym3 = Symbol("foo");
Symbol("foo") 不會強制字符串 "foo" 進(jìn)入一個Symbol，它每次都創(chuàng)建一個新的Symbol：
Symbol("foo") === Symbol("foo"); // false
所以可以利用這個特性來創(chuàng)建私有屬性：
(function() {
// 創(chuàng)建symbol
var key = Symbol("key");
function MyClass(privateData) {
this[key] = privateData;
}
MyClass.prototype = {
doStuff: function() {
... this[key] ...
}
};
})();
var c = new MyClass("hello")
c["key"] === undefined//無法訪問該屬性，因為是私有的
也可以利用Symbol來解除上面所說的沖突問題：
// create a unique symbol
var isMoving = Symbol("isMoving");
...
if (element[isMoving]) {
smoothAnimations(element);
}
element[isMoving] = true;
當(dāng)然，也可以通過另外的調(diào)用方法來生成可以與外界共享的Symbol類型，就是Symbol.for方法。
Symbol.for(key) 方法會根據(jù)給定的鍵 key，來從 symbol 注冊表中找到對應(yīng)的 symbol，如果找到了，則返回它，否則，新建一個與該鍵關(guān)聯(lián)的 symbol，并放入 symbol 注冊表中。
Symbol.for("foo"); // 創(chuàng)建一個 symbol 并放入 symbol 注冊表中，鍵為 "foo"
Symbol.for("foo"); // 從 symbol 注冊表中讀取鍵為"foo"的 symbol
Symbol.for("bar") === Symbol.for("bar"); // true，證明了上面說的
Symbol("bar") === Symbol("bar"); // false，Symbol() 函數(shù)每次都會返回新的一個 symbol
var sym = Symbol.for("mario");
sym.toString();
// "Symbol(mario)"，mario 既是該 symbol 在 symbol 注冊表中的鍵名，又是該 symbol 自身的描述字符串
所以為了防止沖突，我們最好給symbol帶上前綴：
Symbol.for("mdn.foo");
Symbol.for("mdn.bar");
希望本文所述對大家ECMAScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片輪播效果的學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
計算100000數(shù)組js腳本的執(zhí)行時間...2006-10-10
div+css+js模擬tab切換效果 事件綁定 IE,firefox兼容
div+css+js模擬tab,這個版本,理論上可以添加無限個tab,而且,你只要管內(nèi)容的添加行了,不需要改JS2009-12-12
Smartour 讓網(wǎng)頁導(dǎo)覽變得更簡單(推薦)
這篇文章主要介紹了Smartour 讓網(wǎng)頁導(dǎo)覽變得更簡單(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這是一篇譯文，實例分析制作自定義的信息提示框的實現(xiàn)代碼2009-01-01
這篇文章全面的為大家解析了bootstrap格子布局的相關(guān)資料，感興趣的朋友可以參考一下2016-05-05
TypeScript 類class與修飾符的詳細(xì)使用教程
通過 class 關(guān)鍵字定義一個類，然后通過 new 關(guān)鍵字可以方便的生產(chǎn)一個類的實例對象，這個生產(chǎn)對象的過程叫 實例化，類的成員就是類中所有的屬性和方法，這篇文章主要介紹了TypeScript 類class與修飾符的詳細(xì)使用,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JavaScript對象原型鏈原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了淺談JavaScript 代碼簡潔之道，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了js向上無縫滾動,網(wǎng)站公告效果，有需要的朋友可以參考一下2013-11-11