JavaScript的Symbol類型、隱藏屬性及全域登錄詳解
本篇文章為大家帶來了關於javascript的相關知識,其中主要介紹了關於Symbol類型、隱藏屬性及全局註冊表的相關問題,包括了Symbol類型的描述、Symbol不會隱式轉字符串等問題,下面一起來看一下,希望對大家有幫助。
【相關推薦:javascript影片教學、web前端】
##Symbol簡介Symbol類型是
JavaScript中的一種特殊的類型,特殊在所有的
Symbol類型值都互不相同。我們可以使用「Symbol」來表示唯一的值,以下是創建
Symbol物件的案例:
let id = Symbol();
Symbol類型的值,並且把這個值儲存在變數
id#了變數中。
Symbol類型的描述
我們在創建一個Symbol類型變數的時候,可以在參數中傳入一些秒屬性的字串,用來描述這個變數的用途資訊。
例如:
let id1 = Symbol('狂拽酷炫吊炸天的小明的id'); let id2 = Symbol('低调奢华有内涵的婷婷的id');
Symbol類型在任何時候都是不同的,即使他們擁有相同的描述訊息,描述只是一個標籤,除此之外就沒有別的用途了,例如:
let id1 = Symbol('id'); let id2 = Symbol('id'); console.log(id1==id2);//false
Symbol不能直觀的看到內部具體值的特性有關,通過添加一個描述信息,讓我們對變量的用途有更直觀的了解。
Symbol不會隱式轉字串
JavaScript中的大多數類型都可以直接轉換成字串型別輸出,所以我們不能直覺的看到它的值到底是什麼,例如我們可以直接用
alert(123)把數字
123轉換成字串彈出。
但是
Symbol類型比較特殊,它不能直接轉換,例如:
let id = Symbol(); alert(id);//报错,不能把Symbol类型转为字符串
JavaScript中的
Symbol類型不能轉換成字符串是由於其內在的防治語言混亂的「語言保護」機制,因為字串和
Symbol在本質上有著區別,不應該將其中一個轉換成另一個。
Symbol可以轉為字串,那麼它就變成了一個產生獨一無二字串的函數,就不再具備獨立資料類型的必要。
Symbol變數的值,我們可以使用
.toString()方法,如下所示:
let id = Symbol('this is identification'); console.log(id.toString());//Symbol(this is identification);
.description屬性,取得描述資訊:
let id = Symbol('加油,奥利给'); console.log(id.description);//加油,奥利给”
JavaScript的規範,只有兩種類型的值可以作為物件的屬性鍵:
- 字串
- Symbol
建立Symbol鍵
將Symbol作為鍵值有兩種方法:
例1:
let id = Symbol('id'); let user = {}; user[id] = 'id value';//添加Symbol键 console.log(user[id]);//id value
let id = Symbol('id'); let user = { [id]:'id value',//注意这里的方括号 }; console.log(user[id]);
Symbol類型作為鍵的用法,需要注意的是,在存取屬性時需要使用
obj[id ]而不是
obj.id,因為
obj.id代表的是
obj['id']。
Symbol作為物件的鍵會有什麼效果呢?
for…in中被跳過
Symbol非常明顯的一個特徵是,如果物件中使用
Symbol作為鍵,那麼使用
for…in語句是存取不到
Symbol類型的屬性的。
let id = Symbol('id'); let user = { name : 'xiaoming', [id] : 'id', }; for (let key in user) console.log(user[key]);
> xiaoming
[id]物件的值沒有被列印出來,說明在物件屬性清單中,使用
for … in會自動忽略
Symbol類型的鍵。
Object.keys(user)也會忽略所有的
Symbol類型的鍵。
Symbol鍵,但
Object.assign方法能夠複製所有的屬性:
let id = Symbol(); let obj = { [id] : '123' } let obj2 = Object.assign({},obj); console.log(obj2[id]);
Symbol的隱藏屬性,因為複製後的物件仍然無法取得
Symbol鍵。
隐藏自定义属性
由于Symbol
既不能直接转为字符串,我们没有办法直观的获得它的值,又不能通过for … in
获得对象的Symbol
属性,也就是说,如果没有Symbol
变量本身,我们就没有办法获得对象内部的对应属性。
因此,通过Symbol
类型的键值,我们可以隐藏属性,这些属性只能我们自己访问,其他人都看不到我们的属性。
举个例子:
我们在开发的过程中,需要和同事“张三”合作,而这个张三创建了一个非常好用的工具Tool
,Tool
是一个对象类型,我们想白嫖张三的Tool
,并在此基础上添加一些自己的属性。
我们就可以通过添加Symbol
类型的键:
let tool = {//张三写好了的Tool usage : "Can do anything", } let name = Symbol("My tool obj"); tool[name] = "This is my tool"; console.log(tool[name]);
以上示例展示了如何在别人写好的对象上添加自己的属性,那么为什么要使用Symbol
类型而不是常规的字符串呢?
原因如下:
- 对象
tool
是别人写好的代码,原则上我们不应该去修改别人的代码,这样会造成风险; - 避免命名冲突,我们直接使用字符串很有可能会和别人原有的属性键冲突,造成严重的后果;
- 使用
Symbol
永远不会发生命名冲突,因为Symbol
都是不同的; - 别人无法访问
Symbol
类型的键,相当于不会和别人的代码冲突;
错误示范:
如果我们不使用Symbol
类型,很可能出现以下情况:
let tool = {//张三写好了的Tool usage : "Can do anything", } tool.usage = "Boom Boom"; console.log(tool.usage);
以上代码由于重复使用”usage”,从而重写了原属性,会造成对象原功能异常。
Symbol全局注册表
所有的Symbol
变量都是不同的,即使他们有用相同的标签(描述)。
有些时候,我们希望通过一个字符串名称(标签),访问同一个Symbol
对象,例如我们在代码的不同地方访问相同的Symbol
。
JavaScript
会维护一个全局的Symbol
注册表,我们可以通过向注册表中插入Symbol
对象,并为对象起一个字符串名称访问该对象。
向注册表插入或者读取Symbol
对象需要使用Symbol.for(key)
方法,如果注册表中有名为key
的对象,就返回该对象,否则就插入新对象再返回。
举个例子:
let id1 = Symbol.for('id');//注册表内没有名为id的Symbol,创建并返回 let id2 = Symbol.for('id');//注册表内已有名为id的Symbol,直接返回 console.log(id1===id2);//true
我们通过Symbol.for(key)
就能以全局变量的方式使用Symbol
对象,并使用一个字符串标记对象的名字。
相反的,我们还可以使用Symbol.keyFor(Symbol)
反向的从对象获取名称。
举个例子:
let id = Symbol.for('id');//注册表内没有名为id的Symbol,创建并返回 let name = Symbol.keyFor(id); console.log(name);//id
Symbol.keyFor()
函数只能用在全局Symbol
对象上(使用Symbol.for
插入的对象),如果用在非全局对象上,就会返回undefined
。
举个例子:
let id = Symbol('id');//局部Symbol let name = Symbol.keyFor(id); console.log(name);//undefined
系统Symbol
JavaScript
有许多系统Symbol
,例如:
Symbol.hasInstance
Symbol.iterator
Symbol.toPrimitive
它们各有用途,我们在后面的会逐步介绍道这些独特的变量。
总结
-
Symbol
对象的值是唯一的; -
Symbol
可以添加一个标签,并通过标签在全局注册表中查询对象的实体; -
Symbol
作为对象的键无法被for … in
探测到; - 我们可以通过
Symbol
到全局注册表访问全局的Symbol
对象;
但是,Symbol
并不是完全隐藏的,我们可以通过Object.getOwnPropertySymbols(obj)
获取对象所有的Symbol
,或者通过Reflect.ownKeys(obj)
获取对象所有的键。
【相关推荐:javascript视频教程、web前端】
以上是JavaScript的Symbol類型、隱藏屬性及全域登錄詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務
