Object.defineProperty()

  • 通常我們在對象上添加/修改屬性和方法
let obj = {
      user:'xiaoming'
}
obj.detail = 'obj詳情’//添加
obj.fun = function(){}
  • Object.defineProperty也可以修改/添加屬性

  • Object.defineProperty(目標(biāo)對象,要修改/添加的屬性名,特性)

Object.defineProperty(obj, prop, descriptor)
let obj10 = {}
// obj10.num = 13
Object.defineProperty(obj10,'num',{value:13})
console.log(obj10.num)//13
  • 看上面的例子,Object.defineProperty的第三個(gè)參數(shù):是一個(gè){}類型,我們可以在第三個(gè)參數(shù)里面設(shè)置它的,可枚舉性,是否可讀等特性,下面一一例舉
  1. value 設(shè)置屬性值(可以是任意值)
let obj10 = {}
// obj10.num = 13
Object.defineProperty(obj10,'num',{value:13})
console.log(obj10.num)//13
Object.defineProperty(obj10,'num',{value:101})
console.log(obj10.num)//101
  1. writable:是否可寫,默認(rèn)false不可
let obj10 = {}
Object.defineProperty(obj10,'num',{value:13})//添加
console.log(obj10.num)//13
obj10.num=101
console.log(obj10.num)//沒有修改,值還是13
Object.defineProperty(obj10,'num',{value:111})//嘗試修改----報(bào)錯(cuò)
console.log(obj10.num)
image.png
  • 上面的例子,為什么沒有出現(xiàn)我們想要的結(jié)果?因?yàn)镺bject.defineProperty第三個(gè)參數(shù)對象里有個(gè)屬性writable--表示是否可寫。默認(rèn)是false不可寫。將他改為true可寫狀態(tài)。
let obj10 = {}
Object.defineProperty(obj10,'num',{value:13,writable:true})//添加
console.log(obj10.num)//13
obj10.num=101
console.log(obj10.num)//101
Object.defineProperty(obj10,'num',{value:111,writable:true})
console.log(obj10.num)//111
  1. enumerable:是否可枚舉,默認(rèn)false不可。enumerable:false表示對象該屬性不可在for…in/Object.keys()中枚舉??聪旅娴睦?,enumerable:true就可以打印出來。
var obj10={name:'xiaoming',age:10,gender:0}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true,enumerable:true})
console.log(Object.keys(obj10))// ["name", "age", "gender", "detail"]

var obj10={name:'xiaoming',age:10,gender:0}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true})
console.log(Object.keys(obj10))// ["name", "age", "gender"]
console.log(obj10)//{name: "xiaoming", age: 10, gender: 0, detail: "detail"}
  1. Configurable 屬性:默認(rèn)值false。true可以刪除可以重新定義。false不可刪除不可以重新定義
var obj10={name:'xiaoming',age:10,gender:0}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true,enumerable:true,configurable:false})//configurable:false不可刪除,不可重新定義
delete obj10.detail
console.log(obj10)//{name: "xiaoming", age: 10, gender: 0, detail: "detail"}
Object.defineProperty(obj10,'detail',{value:'detail',writable:true,enumerable:true,configurable:true})//報(bào)錯(cuò)
  1. 自定義getter,setter:get是獲取的方法。set是設(shè)置的方法。使用getter,setter方法是不可以使用writable和value這兩個(gè)屬性
var temp = null
var obj = {}
Object.defineProperty(obj,'gender',{
    get:function () {
        return temp
    },
    set:function (value) {
        temp = value
    }
})
obj.gender='設(shè)置值'//set
console.log(obj.gender)//get
  • 總結(jié):Object.defineProperty方法可以在對象上添加/修改屬性,然后返回給這個(gè)對象。設(shè)置特性對象參數(shù):
    value: 設(shè)置屬性的值
    writable: 值是否可寫。
    enumerable:是否可以被枚舉。
    configurable: 是否可以被刪除且再次修改特性
    set: 給目標(biāo)屬性設(shè)置值的方法
    get:獲取目標(biāo)屬性值的方法
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容