2022-03-16

深入淺出Object.defineProperty()

?轉(zhuǎn)自Weastsea

講解大致會(huì)根據(jù)下圖展開

本文部分參考了書籍《你不知道的javascript》上卷

對(duì)象的定義與賦值

經(jīng)常使用的定義與賦值方法obj.prop =value或者obj['prop']=value

Object.defineProperty()語(yǔ)法說(shuō)明

Object.defineProperty()的作用就是直接在一個(gè)對(duì)象上定義一個(gè)新屬性烙常,或者修改一個(gè)已經(jīng)存在的屬性

Object.defineProperty(obj,prop,desc)

obj 需要定義屬性的當(dāng)前對(duì)象

prop 當(dāng)前需要定義的屬性名

desc 屬性描述符

一般通過(guò)為對(duì)象的屬性賦值的情況下巩掺,對(duì)象的屬性可以修改也可以刪除,但是通過(guò)Object.defineProperty()定義屬性社证,通過(guò)描述符的設(shè)置可以進(jìn)行更精準(zhǔn)的控制對(duì)象屬性倦畅。

屬性的特性以及內(nèi)部屬性

javacript 有三種類型的屬性

命名數(shù)據(jù)屬性:擁有一個(gè)確定的值的屬性。這也是最常見的屬性

命名訪問(wèn)器屬性:通過(guò)getter和setter進(jìn)行讀取和賦值的屬性

內(nèi)部屬性:由JavaScript引擎內(nèi)部使用的屬性,不能通過(guò)JavaScript代碼直接訪問(wèn)到肖卧,不過(guò)可以通過(guò)一些方法間接的讀取和設(shè)置。比如掸鹅,每個(gè)對(duì)象都有一個(gè)內(nèi)部屬性[[Prototype]]塞帐,你不能直接訪問(wèn)這個(gè)屬性,但可以通過(guò)Object.getPrototypeOf()方法間接的讀取到它的值巍沙。雖然內(nèi)部屬性通常用一個(gè)雙呂括號(hào)包圍的名稱來(lái)表示葵姥,但實(shí)際上這并不是它們的名字,它們是一種抽象操作句携,是不可見的榔幸,根本沒(méi)有上面兩種屬性有的那種字符串類型的屬性

屬性描述符

通過(guò)Object.defineProperty()為對(duì)象定義屬性,有兩種形式,且不能混合使用削咆,分別為數(shù)據(jù)描述符牍疏,存取描述符,下面分別描述下兩者的區(qū)別:

數(shù)據(jù)描述符 --特有的兩個(gè)屬性(value,writable)

letPerson={}Object.defineProperty(Person,'name',{value:'jack',writable:true// 是否可以改變})

注意拨齐,如果描述符中的某些屬性被省略鳞陨,會(huì)使用以下默認(rèn)規(guī)則:

存取描述符 --是由一對(duì) getter、setter 函數(shù)功能來(lái)描述的屬性

get:一個(gè)給屬性提供getter的方法瞻惋,如果沒(méi)有g(shù)etter則為undefined厦滤。該方法返回值被用作屬性值。默認(rèn)為undefined歼狼。

set:一個(gè)給屬性提供setter的方法掏导,如果沒(méi)有setter則為undefined。該方法將接受唯一參數(shù)羽峰,并將該參數(shù)的新值分配給該屬性趟咆。默認(rèn)值為undefined。

letPerson={}lettemp=nullObject.defineProperty(Person,'name',{get:function(){returntemp},set:function(val){temp=val}})

數(shù)據(jù)描述符和存取描述均具有以下描述符

configrable 描述屬性是否配置梅屉,以及可否刪除

enumerable 描述屬性是否會(huì)出現(xiàn)在for in 或者 Object.keys()的遍歷中

configrable 代碼片段分析

configurable:false不能刪除屬性

configurable:false不能重新定義屬性

等價(jià)上一張圖的代碼

與上一張圖的代碼進(jìn)行對(duì)比

configurable:true能刪除屬性

configurable:true能夠定義屬性

configurable:false與上圖做對(duì)照

從以上代碼運(yùn)行結(jié)果分析總結(jié)可知:

configurable: false 時(shí)忍啸,不能刪除當(dāng)前屬性,且不能重新配置當(dāng)前屬性的描述符(有一個(gè)小小的意外:可以把writable的狀態(tài)由true改為false,但是無(wú)法由false改為true),但是在writable: true的情況下履植,可以改變value的值

configurable: true時(shí)计雌,可以刪除當(dāng)前屬性,可以配置當(dāng)前屬性所有描述符玫霎。

enumerable 代碼片段分析

注意:以下二種區(qū)別

不變性

對(duì)象常量

結(jié)合writable: false 和 configurable: false 就可以創(chuàng)建一個(gè)真正的常量屬性(不可修改凿滤,不可重新定義或者刪除)

對(duì)象常量

禁止擴(kuò)展

如果你想禁止一個(gè)對(duì)象添加新屬性并且保留已有屬性,就可以使用Object.preventExtensions(...)

禁止擴(kuò)展片段1

禁止擴(kuò)展片段2

在非嚴(yán)格模式下庶近,創(chuàng)建屬性gender會(huì)靜默失敗翁脆,在嚴(yán)格模式下,將會(huì)拋出異常鼻种。

密封

Object.seal()會(huì)創(chuàng)建一個(gè)密封的對(duì)象反番,這個(gè)方法實(shí)際上會(huì)在一個(gè)現(xiàn)有對(duì)象上調(diào)用object.preventExtensions(...)并把所有現(xiàn)有屬性標(biāo)記為configurable:false。

密封

所以叉钥, 密封之后不僅不能添加新屬性罢缸,也不能重新配置或者刪除任何現(xiàn)有屬性(雖然可以改屬性的值)

凍結(jié)

Object.freeze()會(huì)創(chuàng)建一個(gè)凍結(jié)對(duì)象,這個(gè)方法實(shí)際上會(huì)在一個(gè)現(xiàn)有對(duì)象上調(diào)用Object.seal(),并把所有現(xiàn)有屬性標(biāo)記為writable: false,這樣就無(wú)法修改它們的值投队。

凍結(jié)

這個(gè)方法是你可以應(yīng)用在對(duì)象上級(jí)別最高的不可變性枫疆,它會(huì)禁止對(duì)于對(duì)象本身及其任意直接屬性的修改(但是這個(gè)對(duì)象引用的其他對(duì)象是不受影響的)

你可以深度凍結(jié)一個(gè)對(duì)象,具體方法為敷鸦,首先這個(gè)對(duì)象上調(diào)用Object.freeze()然后遍歷它引用的所有對(duì)象息楔,并在這些對(duì)象上調(diào)用Object.freeze()寝贡。但是一定要小心,因?yàn)檫@么做有可能會(huì)無(wú)意中凍結(jié)其他共享對(duì)象值依。

屬性定義和屬性賦值

最后一小節(jié)圃泡,總結(jié)一下上述內(nèi)容

屬性定義,通過(guò)Object.defineProperty()形式

如果Obj沒(méi)有名為Prop的自身屬性的話:如果Obj是可擴(kuò)展的話,則創(chuàng)建Prop這個(gè)自身屬性愿险,否則拒絕

如果Obj已經(jīng)有了名為Prop的自身屬性:則按照下面的步驟重新配置這個(gè)屬性

如果這個(gè)已有的屬性是不可配置的颇蜡,則進(jìn)行下面的操作會(huì)被拒絕

1:將一個(gè)數(shù)據(jù)屬性轉(zhuǎn)換成訪問(wèn)器屬性,反之變?nèi)?:改變`[[Configurable]]`或`[[Enumerable]]`3:改變[[Writable]]由false變?yōu)閠rue4:在`[[Writable]]`為`false`時(shí)改變`[[Value]]`5:改變[[Get]]或[[Set]]

否則這個(gè)已有的屬性可以被重新配置

屬性賦值,通過(guò)obj.prop = ''prop"形式

如果在原型鏈上存在一個(gè)名為P的只讀屬性(只讀的數(shù)據(jù)屬性或者沒(méi)有setter的訪問(wèn)器屬性)拯啦,則拒絕

如果在原型鏈上存在一個(gè)名為P的且擁有setter的訪問(wèn)器屬性,則調(diào)用這個(gè)setter

如果沒(méi)有名為P的自身屬性熔任,則如果這個(gè)對(duì)象是可擴(kuò)展的褒链,就創(chuàng)建一個(gè)新屬性,否則疑苔,如果這個(gè)對(duì)象是不可擴(kuò)展的甫匹,則拒絕

如果已經(jīng)存在一個(gè)可寫的名為P的自身屬性,則調(diào)用Object.defineProperty(),該操作只會(huì)更改P屬性的值惦费,其他的特性(比如可枚舉性)都不會(huì)改變

作用以及影響

屬性的定義操作和賦值操作各自有自己的作用和影響兵迅。

賦值可能會(huì)調(diào)用原型上的setter,定義會(huì)創(chuàng)建一個(gè)自身屬性薪贫。

原型鏈中的同名只讀屬性可能會(huì)阻止賦值操作恍箭,但不會(huì)阻止定義操作。如果原型鏈中存在一個(gè)同名的只讀屬性瞧省,則無(wú)法通過(guò)賦值的方式在原對(duì)象上添加這個(gè)自身屬性扯夭,必須使用定義操作才可以。這項(xiàng)限制是在ECMAScript 5.1中引入的

賦值運(yùn)算符不會(huì)改變?cè)玩溕系膶傩?/p>

不能通過(guò)為obj.foo賦值來(lái)改變proto.foo的值鞍匾。這種操作只會(huì)在obj上新建一個(gè)自身屬性

對(duì)象字面量中的屬性是通過(guò)定義操作添加的交洗。

再次啰嗦一次,記住以下兩種形式的區(qū)別:

上面的代碼等同于:

另一方面:

上面的代碼等同于:

335人點(diǎn)贊

javascript基礎(chǔ)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末橡淑,一起剝皮案震驚了整個(gè)濱河市构拳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌梁棠,老刑警劉巖置森,帶你破解...
    沈念sama閱讀 212,657評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異符糊,居然都是意外死亡暇藏,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,662評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門濒蒋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)盐碱,“玉大人把兔,你說(shuō)我怎么就攤上這事∥屯纾” “怎么了县好?”我有些...
    開封第一講書人閱讀 158,143評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)暖混。 經(jīng)常有香客問(wèn)我缕贡,道長(zhǎng),這世上最難降的妖魔是什么拣播? 我笑而不...
    開封第一講書人閱讀 56,732評(píng)論 1 284
  • 正文 為了忘掉前任晾咪,我火速辦了婚禮,結(jié)果婚禮上贮配,老公的妹妹穿的比我還像新娘谍倦。我一直安慰自己,他們只是感情好泪勒,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,837評(píng)論 6 386
  • 文/花漫 我一把揭開白布昼蛀。 她就那樣靜靜地躺著,像睡著了一般圆存。 火紅的嫁衣襯著肌膚如雪叼旋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,036評(píng)論 1 291
  • 那天沦辙,我揣著相機(jī)與錄音夫植,去河邊找鬼。 笑死油讯,一個(gè)胖子當(dāng)著我的面吹牛偷崩,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播撞羽,決...
    沈念sama閱讀 39,126評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼阐斜,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了诀紊?” 一聲冷哼從身側(cè)響起谒出,我...
    開封第一講書人閱讀 37,868評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎邻奠,沒(méi)想到半個(gè)月后笤喳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,315評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡碌宴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,641評(píng)論 2 327
  • 正文 我和宋清朗相戀三年杀狡,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贰镣。...
    茶點(diǎn)故事閱讀 38,773評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡呜象,死狀恐怖膳凝,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情恭陡,我是刑警寧澤蹬音,帶...
    沈念sama閱讀 34,470評(píng)論 4 333
  • 正文 年R本政府宣布,位于F島的核電站休玩,受9級(jí)特大地震影響著淆,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拴疤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,126評(píng)論 3 317
  • 文/蒙蒙 一永部、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呐矾,春花似錦苔埋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,859評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)孕惜。三九已至愧薛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間衫画,已是汗流浹背毫炉。 一陣腳步聲響...
    開封第一講書人閱讀 32,095評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留削罩,地道東北人瞄勾。 一個(gè)月前我還...
    沈念sama閱讀 46,584評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像弥激,于是被迫代替她去往敵國(guó)和親进陡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,676評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容