快捷導(dǎo)航

Object.defineproperty方法示例詳解

更新時(shí)間：2022年12月22日 12:54:32 作者：紫陌~

Object.defineproperty?的作用就是直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性，這篇文章主要介紹了Object.defineproperty方法,需要的朋友可以參考下

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

Object.defineproperty可以接收三個(gè)參數(shù)

Object.defineproperty(obj, prop, desc)

obj : 第一個(gè)參數(shù)就是要在哪個(gè)對(duì)象身上添加或者修改屬性

prop : 第二個(gè)參數(shù)就是添加或修改的屬性名

desc ：配置項(xiàng)，一般是一個(gè)對(duì)象

來一個(gè)簡單的例子

 let  person = {
        name:"碼農(nóng)",
        age: 18
          }
          Object.defineProperty(person,'sex',{
            value:"男"
          })
          console.log(person)

這不就是添加了

第三個(gè)參數(shù)里面還有6個(gè)配置控住屬性

    writable：	是否可重寫
 
    value：  	當(dāng)前值
 
    get：    	 讀取時(shí)內(nèi)部調(diào)用的函數(shù)
 
	set：        寫入時(shí)內(nèi)部調(diào)用的函數(shù)
	
	enumerable： 	是否可以遍歷
 
	configurable： 	是否可再次修改配置項(xiàng)

        let  person = {
        name:"碼農(nóng)",
        age: 18
          }
          Object.defineProperty(person,'sex',{
              value:"男",       //設(shè)置屬性值
              enumerable:true, //控制屬性是否可以枚舉，默認(rèn)值是false
              writable:true, //控制屬性是否可以被修改，默認(rèn)值是false
              configurable:true //控制屬性是否可以被刪除，默認(rèn)值是false
          })
          console.log(person)

writable:true 控制屬性是否可以被修改，控制臺(tái)也看的當(dāng)為TRUE的時(shí)候?qū)傩灾悼梢员恍薷?/li>
configurable:true 控制屬性是否可以被刪除
enumerable:true 控制屬性是否可以枚舉，true的話簡單的說就是可以遍歷獲取該值

還有最重要的兩個(gè)屬性 set和get（即存取器描述：定義屬性如何被存取），這兩個(gè)屬性是干嘛的？

注意：當(dāng)使用了getter或setter方法，不允許使用writable和value這兩個(gè)屬性(如果使用，會(huì)直接報(bào)錯(cuò)滴)

　　get 是獲取值的時(shí)候的方法，類型為 function ，獲取值的時(shí)候會(huì)被調(diào)用，不設(shè)置時(shí)為undefined

　　set 是設(shè)置值的時(shí)候的方法，類型為 function ，設(shè)置值的時(shí)候會(huì)被調(diào)用，undefined

　　get或set不是必須成對(duì)出現(xiàn)，任寫其一就可以

代碼來看看

 let number = 18
        let person = {
            name:'碼農(nóng)',
            sex:'男',
        }
 
        Object.defineProperty(person,'age',{
            //當(dāng)有人讀取person的age屬性時(shí)，get函數(shù)(getter)就會(huì)被調(diào)用，且返回值就是age的值
            get(){
                console.log('有人讀取age屬性了')
                return number
            },
            //當(dāng)有人修改person的age屬性時(shí)，set函數(shù)(setter)就會(huì)被調(diào)用，且會(huì)收到修改的具體值
            set(value){
                console.log('有人修改了age屬性，且值是',value)
                number = value
            }
        })
        console.log(person)