Object.defineProperty的基本使用

<script>
  let personObj={
      name:'何西亞',
      sex:'男'
  }
  //我們想給這個物件新增一個屬性
  // 第一個引數是你要新增的物件名，
  // 第二個引數你要新增的key值
  // 第三個引數是 一個配置項 是個物件 
  Object.defineProperty(personObj,'age',{ value:35 })
  //輸出 {name: "何西亞", sex: "男", age: 35}
  console.log( personObj);
  </script>
 

為啥要使用 Object.defineProperty 新增key值

有的同學可能會說，我使用通過點和[]的方式難道不好嗎
<script>
    let personObj={
        name:'何西亞',
        sex:'男'
    }
    personObj['age']=35
    personObj.height=1.86
    //使用這一種方式也可以新增key值，難道這樣不香嗎
    console.log(personObj);
</script>

這樣是可以的，但是我使用 Object.defineProperty
是非常高階的
那麼高階在哪裡呢？

咳咳咳，使用 Object.defineProperty新增的key值，
是不會參與列舉
列舉:簡單點說就是不會參與迴圈。[這樣描述可能不太準確]
我們可以證明一下：Object.defineProperty新增的key值不會被遍歷
 

Object.defineProperty新增的key值不會被遍歷

<script>
  let personObj={
      name:'何西亞',
      sex:'男'
  }
  Object.defineProperty(personObj,'age',{ value:35 })
  // Object.keys()返回物件鍵名key組成的陣列
  console.log(Object.keys(personObj)); // [name,sex ]
  //在這裡我們發現age這個屬性沒有返回
  //所以說明了【Object.defineProperty新增的key值不會被遍歷】
</script>
 

想要 Object.defineProperty新增的key值被遍歷

有的同學喜歡去鑽牛角尖，說我非要去讓它遍歷。
也不是不可以，我們之前說過  Object.defineProperty
第三個引數是 一個配置項 是個物件
這樣配置enumerable:true 表示可以列舉

let personObj={
    name:'何西亞',
    sex:'男'
}
//
Object.defineProperty(personObj,'age',{ value:35, enumerable:true })
// Object.keys()返回物件鍵名key組成的陣列
console.log(Object.keys(personObj)); // [name,sex,age ]
//這個時候我們發現是可以枚舉了

Object.defineProperty中key值是否可以被修改

<script>
    let personObj={
        name:'何西亞',
        sex:'男'
    }
    Object.defineProperty(personObj,'age',{ value:35, enumerable:true })
    personObj.age='350'
    // 通過這樣的方式，是不可以被修改的哈
    console.log(personObj.age); //輸出 35
</script>

如果我們想要age可以被修改，我們配置
let personObj={
    name:'何西亞',
    sex:'男'
}
//配置 enumerable:true,
Object.defineProperty(personObj,'age',{ value:35, enumerable:true,writable:true })
personObj.age='350'
// 這樣就可以修改年齡了
console.log(personObj.age); //輸出 350

Object.defineProperty中新增的key值可以被刪除

let personObj={
    name:'何西亞',
    sex:'男'
}
// configurable:true 表示後面可以刪除age這個屬性，
// 正常情況下age是不可以被刪除的哦！
Object.defineProperty(personObj,'age',{ value:35, configurable:true })
delete personObj.age
console.log(personObj) 
輸出 { name:'何西亞', sex:'男'} 

需求描述

我們想這樣操作：
一個物件中的某一個屬性值去讀取某一個變數
當這個變數的值發生變化後，物件中的那個屬性值發生變化

let num=35
let personObj={
    name:'何西亞',
    sex:'男',
    age:num
}
//輸出35
console.log('修改前', personObj.age ) 
num=36
//修改後仍然輸出35,但是我想讓它輸出36
console.log('修改後',personObj.age );

Object.defineProperty的get函式的使用

這個時候，Object.defineProperty的get函式的來幫助我們了!

<script>
let num=35
let personObj={
    name:'何西亞',
    sex:'男',
    age:num
}
num=36
Object.defineProperty(personObj,'age',{
    //當有人讀取 personObj的age屬性的時候
    // 就會觸發get函式【getter】，該函式就會被呼叫
    // 函式的返回值就是age的值
    get:function(){
        console.log('讀取age屬性的時候回觸發該函式')
        return num
    }
})
console.log('修改後',personObj.age ); //輸出36
</script>

使用Object.defineProperty的set函式的原因

<script>
let num = 35
let personObj = {
    name: '何西亞',
    sex: '男',
    age: num
}
num = 36 //可以修改age的值
Object.defineProperty(personObj, 'age', {
    //當有人讀取 personObj的age屬性的時候
    // 就會觸發get函式【getter】，該函式就會被呼叫
    // 函式的返回值就是age的值
    get: function () {
        console.log('讀取age屬性的時候回觸發該函式')
        return num
    }
})
//後面通過這樣的方式修改age的值會失敗
personObj.age='350'
//本來我們期待是350，但是實際上是 36
console.log('修改後', personObj.age);
這個時候我們就需要使用set函數了，它就可以解決這個問題 
</script>

Object.defineProperty中set函式的使用

<script>
let num=35
let personObj={
    name:'何西亞',
    sex:'男',
    age:num
}
num=36
Object.defineProperty(personObj,'age',{
    //當有人讀取 personObj的age屬性的時候
    // 就會觸發get函式【getter】，該函式就會被呼叫
    // 函式的返回值就是age的值
    get:function(){
        console.log('讀取age屬性的時候回觸發該函式')
        return num
    },

    // 當有人修改age屬性的時候，set函式【setter】就會被觸發
    // 且會收到修改的具體值
    set:function(value){
        console.log('修改age了',value)
        // 修改後需要進行賦值，否者通過personObj.age='350'修改會失敗
        num=value
    }
})
personObj.age='350'
console.log('修改後',personObj.age ); //輸出350

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！