天天看點

javascript之Object.defineProperty的奧妙

今天遇到一個這樣的功能:

寫一個函數,該函數傳遞兩個參數,第一個參數為傳回對象的總資料量,第二個參數為初始化對象的資料。如:

傳回的該對象總會有以下屬性:overlength(資料容納量)、size(目前資料條數)

傳回的對象應該有以下方法:cache(儲存一條資料)、delete(删除一條資料)

每一次引用某屬性後,該屬性值消失。如:

那麼問題來了,如何設定屬性在使用一次後自動消除呢,經過思考,想到了,get和set方法,get和set又是什麼呢,如下:

javascript之Object.defineProperty的奧妙
javascript之Object.defineProperty的奧妙

js中引用屬性的值視為get,給屬性指派視為set,get和set方法可以在擷取/設定屬性值時進行一定的操作。

本文中所用到了get和set方法,不過并不是上述例子那樣簡單的在對象中書寫,我們借助了本文的主角object.defineproperty方法。

object.defineproperty是es5新加的給對象屬性設定描述符的方法,使用方法如下:

基本的描述符有3個:

writable  --  是否為可寫

configurable  --  是否為可配置的

enumerable  --  是否為可枚舉的

下面分别舉個簡單的例子來說明其用法

顧名思義,設定屬性是否為可寫,如果是false,則屬性之後的指派操作無效

javascript之Object.defineProperty的奧妙
javascript之Object.defineProperty的奧妙

屬性是否可配置,設定為false後,該屬性不可被删除,也不可再更改為可配置的,但是可以從可寫改為不可寫

javascript之Object.defineProperty的奧妙
javascript之Object.defineProperty的奧妙

屬性是否可枚舉,如果是false,則屬性不可枚舉,不可枚舉屬性對  for ... in語句和ojbect.keys是不可見的。

javascript之Object.defineProperty的奧妙
javascript之Object.defineProperty的奧妙

分界線----------------------------------------------------------------------------

除了上面三個屬性,defineproperty方法内部還可以定義屬性的value值, get/set方法,那麼本章則用到了使用object.defineproperty方法定義屬性的get/set值。

思路:本題主要圍繞着屬性的get/set做進一步處理,要求引用一次屬性值後,屬性值消失(undefined),那麼就需要在get方法中做文章,是以我們先制定一個定義屬性描述符的方法,我把它定義成這樣:

javascript之Object.defineProperty的奧妙
javascript之Object.defineProperty的奧妙

本題的主要部分就在這裡,這段代碼利用的屬性的get和set方法,針對題目的要求,做出了這個功能函數。注意:傳回的對象ret并沒有儲存資料,他隻是通過set和get方法對datas緩存對象中的資料進行的設定和讀取。

datas對象是這樣的,他利用的es6中的object.assign方法,把init拷貝了一份作初始化

整個代碼就在這裡,也很簡單,寫的也比較亂。如果有問題,請指出。

javascript之Object.defineProperty的奧妙
javascript之Object.defineProperty的奧妙

本章就到這裡,部落客為一介前端菜鳥,并沒有多少知識,try my best,寫點基礎知識,分享給正在學習前端的新人們。