快來圍觀一下JavaScript的Proxy

2021-08-21 16:45:59 字數 1950 閱讀 4158

摘要: 的確寫proxy文章很多,那麼今天我也不湊字數了,炒兩個栗子吧。 一、虛擬屬性 const person = 對於上述物件,我們可能需要位址資訊(由省市拼接而成),在此之前我們可能會採取下列方式: 直接在person物件上宣告乙個address屬性; 當用到address資訊時,再通過person拼接。

的確寫proxy文章很多,那麼今天我也不湊字數了,炒兩個栗子吧。

const person =

對於上述物件,我們可能需要位址資訊(由省市拼接而成),在此之前我們可能會採取下列方式:

第乙個方法的主要弊端是汙染了原有的物件,而第二種方法就很不靈活。現在我們可以通過proxy實現比較好的效果:

const enhanceperson = new proxy(person, -$`

default:

return target[name]}}

})enhanceperson.address // 江蘇省-南京市

通過這種方式我們就可以實現虛擬屬性了,因為它不會被遍歷出來:

object.keys(enhanceperson) // [ 'name', 'province', 'city' ]

這裡還有乙個我覺得比較容易忽略的點:

person === enhanceperson // false

enhanceperson.city = '蘇州市'

enhanceperson.city === person.city // true

顯然這兩個並不是同乙個物件,但是我通過改變enhanceperson的city屬性卻影響到了person的city屬性,這就是我們通常會忽略掉的,如果你不設定proxy的set方法,它會保持預設行為:

set (target, propkey, value)

可能有些同學會想不就是不讓它遍歷出來嗎?看這招:

const person = -$`

}} const enhanceperson = new proxy(person,

})enhanceperson.address // 江蘇省-南京市

object.keys(enhanceperson) // [ 'name', 'province', 'city' ]

雖然是實現了上述的功能,但是proxy中的ownkeys攔截的方法太多,所以我們攔截ownkeys之後,會導致某些方法無法使用,並且攔截ownkeys返回的結果也有嚴格的要求:

所以在攔截方法注意點很多,不然很容易出現問題。

tip: 未通過defineproperty定義的屬性的描述器屬性預設為true,否則預設為false。

當我第一次接觸python時,比較有印象的就是它的list的乙個語法: arr[1:3],以前只有羨慕的份,現在完全可以自己擼乙個:

const arr = [1, 2, 3, 4, 5, 6, 7, 8]

const list = new proxy(arr,

return target[name]}})

list['2:6'] // [ 3, 4, 5, 6 ]

是不是,對於物件,我們同樣可以採用類似的方法:

const obj = 

}} const obj1 = new proxy(obj,

return pre

}, target)}})

obj1['a.b.c'] // xiaoyun

MySQL字元又亂碼了?快來看一下如何配置字符集吧

字符集級別及設定 mysql字符集修改方法 我們在開發過程中可能會碰到mysql字符集的問題,有時候發現存入某個字元,資料庫儲存不對。有時候發現,儲存某個字元正確,但是獲取到的又是亂碼。這種情況下乙個乙個去網上搜尋,實在是浪費時間。這裡總結一下mysql中字符集的規則以及配置方法,下次遇到問題時,不...

DA轉換器是什麼?快來一起學習一下吧

我們上篇文章da轉換器是什麼?快來一起學習一下吧!已經談論了ad轉換器是什麼,以及如何使用,那麼這篇文章我們就來學習一下他的卵生兄弟da轉換器的一些知識吧!一 什麼是da轉換器 da轉換器是將數字量轉換為模擬量的電路,主要用於資料傳輸系統 自動測試裝置 醫療資訊處理 電視訊號的數位化 影象訊號的處理...

說一下Docker 一

對於提高伺服器的效能,支援輕量級的虛擬,實現開發測試上線的高度一致,團隊開發環境的協調統一,docker表現得極為出色。在功能上,我們將docker理解為乙個超輕量級的虛擬機器,它比vmware占用的資源少很多,執行速度快很多,因為它們的底層實現技術完全不同。docker就像乙個模具,我們能在作業系...