let person = {
? ? name:'張三',
? ? sex:'男',
}
Object.defineProperty(person,'age',{
? ? value:18,
? ? enumerable:true,//控制屬性是否可以枚舉，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性才會出現(xiàn)在對象的枚舉屬性中。
? ? writable:true,//控制屬性是否可以被修改，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，才能被賦值運(yùn)算符改變。
? ? configurable:true,//控制屬性是否可以被刪除，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性能從對應(yīng)的對象上被刪除。 ?
? ? ? ? ? ? ?
})
console.log(person);

使用getter、setter

let age_number = 18;
let person = {
? ? name:'張三',
? ? sex:'男',
}
Object.defineProperty(person,'age',{
? ? //value:18,
? ? //enumerable:true,//控制屬性是否可以枚舉，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性才會出現(xiàn)在對象的枚舉屬性中。
? ? //writable:true,//控制屬性是否可以被修改，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，才能被賦值運(yùn)算符改變。
? ? //configurable:true,//控制屬性是否可以被刪除，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性能從對應(yīng)的對象上被刪除。 ?
? ? get(){
? ? ? ? console.log("讀取age屬性");
? ? ? ? return age_number;
? ? },
? ? set(value)
? ? {
? ? ? ? console.log("修改age的值");
? ? ? ? age_number = value;
? ? } ? ? ? ? ? ? ?
})
console.log(person);

需要Object.defineProperty()注意點(diǎn)

1.用Object.defineProperty方法創(chuàng)建一個新屬性時，如果不指定configurabel，enumberable，writable特性的默認(rèn)值都是false，修改已定義的屬性特性無限制。

2.Configurable性定義為不可配置就不能把它變回可配置，此時調(diào)用Object.defineProperty修改除writable之外的特性都會報(bào)錯。

3.模擬訪問和設(shè)置的行為：想要訪問器屬性模擬默認(rèn)行為的話，必須的在里面新添一個屬性不然會造成循環(huán)引用

var obj={
a:1
};
?
Object.defineProperty(obj,"a",{
get:function(){
return this.a;
},
?
set:function(val){
this.a=val
}
});
obj.a;// Maximum call stack size exceeded

會造成循環(huán)引用，狂call不止

person.a → get.call(person) → this.a → person.a ?→ get.call(person) → this.a......

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)把表單form數(shù)據(jù) 轉(zhuǎn)化成json格式的數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
基于Vuejs實(shí)現(xiàn)購物車功能
這篇文章主要為大家詳細(xì)介紹了基于Vuejs實(shí)現(xiàn)購物車功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-08-08
vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信詳解
這篇文章主要給大家介紹了關(guān)于vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-08-08
Vue前端書寫規(guī)范大全(非常詳細(xì)!)
在團(tuán)體開發(fā)項(xiàng)目中,為了團(tuán)隊(duì)所有成員書寫可維護(hù)的代碼,而不是一次性的代碼,讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然,下面這篇文章主要給大家介紹了關(guān)于Vue前端書寫規(guī)范的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue+elementUI實(shí)現(xiàn)動態(tài)展示列表的數(shù)據(jù)
這篇文章主要介紹了Vue+elementUI實(shí)現(xiàn)動態(tài)展示列表的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
element-ui?tree?異步樹實(shí)現(xiàn)勾選自動展開、指定展開、指定勾選功能
這篇文章主要介紹了element-ui?tree?異步樹實(shí)現(xiàn)勾選自動展開、指定展開、指定勾選,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下
2022-08-08
vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue導(dǎo)出html、word和pdf的實(shí)現(xiàn)方法，文中完成了三種文件的導(dǎo)出但是還有很多種方法，小編就不給大家一一列舉了,需要的朋友可以參考下
2018-07-07
vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了vue中Echarts使用動態(tài)數(shù)據(jù)的兩種實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue3+vite項(xiàng)目中按需引入vant報(bào)錯:Failed?to?resolve?import的解決方案
最近在vue項(xiàng)目中引入vant的時候發(fā)現(xiàn)報(bào)錯了,經(jīng)過嘗試發(fā)現(xiàn)了問題,現(xiàn)將完整引入流程提供給大家參考,下面這篇文章主要給大家介紹了關(guān)于vue3+vite項(xiàng)目中按需引入vant報(bào)錯:Failed?to?resolve?import的解決方案,需要的朋友可以參考下
2022-12-12
vue element-ui之怎么封裝一個自己的組件的詳解
這篇文章主要介紹了vue element-ui之怎么封裝一個自己的組件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05