JavaScript對象屬性設置和屏蔽技巧
正文
了解了獲取對象屬性的基本方式,在當前對象中不存在的屬性,會沿著對象的原型鏈不斷往上查找目標屬性,直至找到或到Object.prototype都不存在而結(jié)束查找。
思考如下代碼:
myObject.foo = 100
當我們設置對象的某個屬性,也可能會出現(xiàn)類似的問題。
有幾種情況:
- 當前對象存在,原型鏈對象不存在
- 當前對象存在,原型鏈對象也存在
- 當前對象不存在,而原型鏈對象中存在
- 都不存在:當前對象和原型鏈各對象中都不存在設置屬性
我們先來說下最常見,也最簡單的場景:
屬性僅存在于當前對象中,而原型鏈中不存在,且屬性在對象中是可寫的,那需要做的僅僅是賦值操作,改變屬性值即可。
還有種情況,處理方式也比較簡單:當前對象和原型鏈上都不存在該屬性,且是可寫的,那會在最底層,也就是當前對象新增這個屬性,并賦值。
如果在當前對象和原型鏈中都存在,就會發(fā)生屏蔽,會優(yōu)先選擇最底層對象屬性。也就是說只要當前對象屬性可以被賦值,那就對當前對象屬性值進行操作;如果原型鏈對象上的該屬性是被設置了可讀,那當前對象并未進行修改,則不可操作,嚴格模式下,還會報錯。
最后一種情況,如果屬性不存在與當前對象而僅出現(xiàn)在原型鏈對象中,屬性均可寫,那會如何呢?
思考如下代碼:
const myObject = {
foo: 100
}
const createObject = Object.create(myObject)
createObject.foo = 200
console.log(myObject.foo, createObject.foo) // 100 200
正常來說,如果沒有createObject.foo操作,則createObject對象是空的,不存在foo屬性,賦值操作后,從打印的結(jié)果可以看出,它會給當前新對象創(chuàng)建新屬性并賦值,且原型指向的對象不會受當前對象賦值的影響。
以上就是JavaScript對象屬性設置和屏蔽的小技巧內(nèi)容,更多關(guān)于JavaScript對象屬性設置屏蔽的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript使用SpreadJS創(chuàng)建Excel查看器
在現(xiàn)代的Web應用開發(fā)中,Excel文件的處理和展示是一項常見的需求,小編今天將為大家展示如何借助SpreadJS來創(chuàng)建一個Excel查看器,感興趣的小伙伴可以了解下2023-12-12
使用JavaScript構(gòu)建一個動態(tài)交互式圖表
在Web開發(fā)中,JavaScript不僅是實現(xiàn)交互效果的關(guān)鍵,還可以用于構(gòu)建復雜的可視化組件,如動態(tài)交互式圖表,下面我們就來看看如何構(gòu)建一個動態(tài)交互式圖表吧2024-02-02

