Object.defineproperty方法示例詳解

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

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

Object.defineproperty 的作用就是直接在一個對象上定義一個新屬性，或者修改一個已經存在的屬性

Object.defineproperty可以接收三個參數

Object.defineproperty(obj, prop, desc)

obj : 第一個參數就是要在哪個對象身上添加或者修改屬性

prop : 第二個參數就是添加或修改的屬性名

desc ：配置項，一般是一個對象

來一個簡單的例子

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

這不就是添加了

第三個參數里面還有6個配置控住屬性

    writable：	是否可重寫
 
    value：  	當前值
 
    get：    	 讀取時內部調用的函數
 
	set：        寫入時內部調用的函數
	
	enumerable： 	是否可以遍歷
 
	configurable： 	是否可再次修改配置項

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

writable:true 控制屬性是否可以被修改，控制臺也看的當為TRUE的時候屬性值可以被修改
configurable:true 控制屬性是否可以被刪除
enumerable:true 控制屬性是否可以枚舉，true的話簡單的說就是可以遍歷獲取該值

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

注意：當使用了getter或setter方法，不允許使用writable和value這兩個屬性(如果使用，會直接報錯滴)

　　get 是獲取值的時候的方法，類型為 function ，獲取值的時候會被調用，不設置時為undefined

　　set 是設置值的時候的方法，類型為 function ，設置值的時候會被調用，undefined

　　get或set不是必須成對出現，任寫其一就可以

代碼來看看

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