Symbol這個(gè)詞在IT軟件領(lǐng)域?qū)嶋H上是個(gè)常見(jiàn)角色，在傳統(tǒng)前端技術(shù)領(lǐng)域，這個(gè)詞出現(xiàn)頻率有限，但是，隨著現(xiàn)代web技術(shù)的發(fā)展，Symbol這個(gè)詞開(kāi)始在不同前端語(yǔ)言中出現(xiàn)。

symbol的中文意思是：符號(hào)；象征；標(biāo)志；記號(hào)等。

我最早知道是在Adobe Illustrator軟件中，作為一個(gè)矢量符號(hào)存在。在SVG中，就有專(zhuān)門(mén)的<symbol>標(biāo)簽，用來(lái)指代SVG小圖標(biāo)。

在這里，Symbol又有了另外的角色，作為一個(gè)JavaScript的原生數(shù)據(jù)類(lèi)型（primitive data type）存在。

說(shuō)到JavaScript原生數(shù)據(jù)類(lèi)型，我們通常想到的有這6種：undefined、null、boolean、string、number、object。而symbol是ES6新增的一個(gè)原生數(shù)據(jù)類(lèi)型。ES6引入了一種新的原始數(shù)據(jù)類(lèi)型Symbol，表示獨(dú)一無(wú)二的值。

Symbol函數(shù)前不能使用new命令，否則會(huì)報(bào)錯(cuò)。這是因?yàn)樯傻腟ymbol是一個(gè)原始類(lèi)型的值，不是對(duì)象。會(huì)報(bào)下面的錯(cuò)誤：

Uncaught TypeError: Symbol is not a constructor

Symbol函數(shù)可以接受一個(gè)字符串作為參數(shù)，表示對(duì)Symbol實(shí)例的描述，主要是為了在控制臺(tái)顯示，或者轉(zhuǎn)為字符串時(shí)，比較容易區(qū)分。

而Symbol本身又是一個(gè)方法。

例如下面JS：

typeof Symbol();

可以看到Symbol()作為一個(gè)方法執(zhí)行了，同時(shí)typeof其類(lèi)型，也是'symbol'，如下截圖：

Symbol的作用非常的專(zhuān)一，換句話(huà)說(shuō)其設(shè)計(jì)出來(lái)就只有一個(gè)目的——作為對(duì)象屬性的唯一標(biāo)識(shí)符，防止對(duì)象屬性沖突發(fā)生。

舉個(gè)例子，你看上了公司前來(lái)的前臺(tái)妹紙，想了解關(guān)于她的更多信息，于是就詢(xún)問(wèn)Hr同事，掃地阿姨，于是得到類(lèi)似這樣信息：

let info1 = {name: '塔燈網(wǎng)絡(luò)',age: 24,job: 'www.xttblog.com',description: '平時(shí)喜歡做做瑜伽，人家有男朋友，你別指望了'}let info2 = {description: '這小姑娘挺好的，挺熱情的，嘿嘿嘿……'}

顯然，你需要對(duì)這兩個(gè)數(shù)據(jù)進(jìn)行匯總，結(jié)果，就會(huì)發(fā)現(xiàn)，描述都用了同一個(gè)對(duì)象屬性description，于是整合的時(shí)候，就容器沖突，覆蓋，導(dǎo)致“人家有男朋友”這么重要的信息都沒(méi)注意到。

但是，如果要是Symbol，則完全就不要擔(dān)心這個(gè)問(wèn)題了：

let info1 = {name: '婷婷',age: 24,job: '公司前臺(tái)',[Symbol('description')]: '平時(shí)喜歡做做瑜伽，人家有男朋友，你別指望了'}let info2 = {[Symbol('description')]: '這小姑娘挺好的，挺熱情的，嘿嘿嘿……'}

此時(shí)，我們對(duì)info1, info2對(duì)象進(jìn)行復(fù)制，如下：

let target = {};Object.assign(target, info1, info2);

此時(shí)target對(duì)象如下截圖所示：

妹紙所有的描述信息都被完完整整地保留了下來(lái)了。

因?yàn)镾ymbol()返回值是唯一的，也就是：

Symbol('description') === Symbol('description');// 返回值是false

Symbol值不能與其他類(lèi)型的值進(jìn)行運(yùn)算

// 沒(méi)有參數(shù)的情況var s1 = Symbol();var s2 = Symbol();s1 === s2 // false// 有參數(shù)的情況var s1 = Symbol("foo");var s2 = Symbol("foo");s1 === s2 // false

Symbol作為屬性使用。

var mySymbol = Symbol();// 第一種寫(xiě)法var a = {};a[mySymbol] = 'Hello!';// 第二種寫(xiě)法var a = {[mySymbol]: 'Hello!'};// 第三種寫(xiě)法var a = {};Object.defineProperty(a, mySymbol, { value: 'Hello!' });// 以上寫(xiě)法都得到同樣結(jié)果a[mySymbol] // "Hello!"

Symbol值作為對(duì)象屬性名時(shí)，不能用點(diǎn)運(yùn)算符。

var a = {};var name = Symbol();a.name = 'lili';a[name] = 'lucy';console.log(a.name,a[name]); //lili,lucy

Symbol值作為屬性名時(shí)，該屬性還是公開(kāi)屬性，不是私有屬性。

這個(gè)有點(diǎn)類(lèi)似于java中的protected屬性（protected和private的區(qū)別：在類(lèi)的外部都是不可以訪(fǎng)問(wèn)的，在類(lèi)內(nèi)的子類(lèi)可以繼承protected不可以繼承private）

但是這里的Symbol在類(lèi)外部也是可以訪(fǎng)問(wèn)的，只是不會(huì)出現(xiàn)在for…in、for…of循環(huán)中，也不會(huì)被Object.keys()、Object.getOwnPropertyNames()返回。但有一個(gè)Object.getOwnPropertySymbols方法，可以獲取指定對(duì)象的所有Symbol屬性名。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/21341.html