Object.defineProperty方法 與 數據代理

const person = { name: 'Lydia' }

Object.defineProperty(person, 'age', {
  value: 21,
})

console.log(person)
console.log(Object.keys(person))

輸出結果

原因：

defineProperty方法提供給我們（getter）給對象添加一個新屬性，或者通過（setter）修改已經存在的屬性，當然上面的例子只涉及到最簡單的修改。

const person = { name: 'Lydia' }
let number=21;
Object.defineProperty(person, 'age', {
//   value:21,
  enumerable:true, //控制屬性是否可以枚舉，預設值是false
  // writable:true, //控制屬性是否可以被修改，預設值是false
  // configurable:true //控制屬性是否可以被刪除，預設值是false

  //當有人讀取person的age屬性時，get函數(getter)就會被調用，且返回值就是age的值
  get() {
    console.log('有人讀取age屬性了')
    return number
  },

  //當有人修改person的age屬性時，set函數(setter)就會被調用，且會收到修改的具體值
  set(value) {
    number = value
  },
});

age屬性會自動幫我們轉為setter/getter，等我們真正需要或者修改，則會顯示出對應的age屬性

而在使用了該方法給對象添加一個屬性後，屬性便預設為 不可枚舉 not enumerable。

因此Object.keys方法僅返回對象中 可枚舉 enumerable的屬性，即代碼中的name。

添加屬性改變Object.defineProperty方法的預設行為

之所以有以下的寫法，也是為我們相比於添加到對象中的屬性有更多控制權

Object.defineProperty(person, 'age', {
  value:21,
  // enumerable:true, //控制屬性是否可以枚舉，預設值是false
  // writable:true, //控制屬性是否可以被修改，預設值是false
  // configurable:true //控制屬性是否可以被刪除，預設值是false
})

數據代理

定義：
通過一個對象代理對另一個對象中屬性的讀或寫操作，而我們可以通過Object.defineProperty方法實現

//創建對象1
let obj = { x: 100 }
//創建對象2
let obj2 = { y: 200 }
//我希望可以令對象2代理對象1，併進行相應的操作
Object.defineProperty(obj2, 'x', {
  get() {
    return obj.x
  },
  set(value) {
    obj.x = value
  },
})

可以看到確實能實現（註意要在開發者模式的控制臺下操作）