JavaScript對(duì)象屬性設(shè)置和屏蔽技巧
正文
了解了獲取對(duì)象屬性的基本方式,在當(dāng)前對(duì)象中不存在的屬性,會(huì)沿著對(duì)象的原型鏈不斷往上查找目標(biāo)屬性,直至找到或到Object.prototype
都不存在而結(jié)束查找。
思考如下代碼:
myObject.foo = 100
當(dāng)我們?cè)O(shè)置對(duì)象的某個(gè)屬性,也可能會(huì)出現(xiàn)類似的問(wèn)題。
有幾種情況:
- 當(dāng)前對(duì)象存在,原型鏈對(duì)象不存在
- 當(dāng)前對(duì)象存在,原型鏈對(duì)象也存在
- 當(dāng)前對(duì)象不存在,而原型鏈對(duì)象中存在
- 都不存在:當(dāng)前對(duì)象和原型鏈各對(duì)象中都不存在設(shè)置屬性
我們先來(lái)說(shuō)下最常見(jiàn),也最簡(jiǎn)單的場(chǎng)景:
屬性僅存在于當(dāng)前對(duì)象中,而原型鏈中不存在,且屬性在對(duì)象中是可寫的,那需要做的僅僅是賦值操作,改變屬性值即可。
還有種情況,處理方式也比較簡(jiǎn)單:當(dāng)前對(duì)象和原型鏈上都不存在該屬性,且是可寫的,那會(huì)在最底層,也就是當(dāng)前對(duì)象新增這個(gè)屬性,并賦值。
如果在當(dāng)前對(duì)象和原型鏈中都存在,就會(huì)發(fā)生屏蔽,會(huì)優(yōu)先選擇最底層對(duì)象屬性。也就是說(shuō)只要當(dāng)前對(duì)象屬性可以被賦值,那就對(duì)當(dāng)前對(duì)象屬性值進(jìn)行操作;如果原型鏈對(duì)象上的該屬性是被設(shè)置了可讀,那當(dāng)前對(duì)象并未進(jìn)行修改,則不可操作,嚴(yán)格模式下,還會(huì)報(bào)錯(cuò)。
最后一種情況,如果屬性不存在與當(dāng)前對(duì)象而僅出現(xiàn)在原型鏈對(duì)象中,屬性均可寫,那會(huì)如何呢?
思考如下代碼:
const myObject = { foo: 100 } const createObject = Object.create(myObject) createObject.foo = 200 console.log(myObject.foo, createObject.foo) // 100 200
正常來(lái)說(shuō),如果沒(méi)有createObject.foo
操作,則createObject對(duì)象是空的,不存在foo屬性,賦值操作后,從打印的結(jié)果可以看出,它會(huì)給當(dāng)前新對(duì)象創(chuàng)建新屬性并賦值,且原型指向的對(duì)象不會(huì)受當(dāng)前對(duì)象賦值的影響。
以上就是JavaScript對(duì)象屬性設(shè)置和屏蔽的小技巧內(nèi)容,更多關(guān)于JavaScript對(duì)象屬性設(shè)置屏蔽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript初學(xué)者需要了解10個(gè)小技巧
在之前的編程語(yǔ)言排行榜中,我們?cè)榻B過(guò)轉(zhuǎn)正在即的JavaScript語(yǔ)言,正如文章中闡明的那樣,JavaScript不僅是最具活力的腳本語(yǔ)言,還是是最有用的編程語(yǔ)言之一。2010-08-08微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分與展示
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)分與展示,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05學(xué)習(xí)LayUI時(shí)自研的表單參數(shù)校驗(yàn)框架案例分析
本框架基于LayUI框架寫的表單參數(shù)校驗(yàn)框架,本文分過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2019-07-07JavaScript使用SpreadJS創(chuàng)建Excel查看器
在現(xiàn)代的Web應(yīng)用開(kāi)發(fā)中,Excel文件的處理和展示是一項(xiàng)常見(jiàn)的需求,小編今天將為大家展示如何借助SpreadJS來(lái)創(chuàng)建一個(gè)Excel查看器,感興趣的小伙伴可以了解下2023-12-12使用JavaScript構(gòu)建一個(gè)動(dòng)態(tài)交互式圖表
在Web開(kāi)發(fā)中,JavaScript不僅是實(shí)現(xiàn)交互效果的關(guān)鍵,還可以用于構(gòu)建復(fù)雜的可視化組件,如動(dòng)態(tài)交互式圖表,下面我們就來(lái)看看如何構(gòu)建一個(gè)動(dòng)態(tài)交互式圖表吧2024-02-02