這是js中一個非常重要的方法，ES6中某些方法的實現依賴於它，VUE通過它實現雙向綁定

參數

Object.defineProperty(object, attribute, descriptor)

這三個參數都是必輸項

第一個參數為目標對象

第二個參數為需要定義的屬性或者方法

第三個參數為目標屬性所擁有的特性

前兩個參數都很明確，重點是第三個參數 descriptor， 它有以下取值

descriptor

value: 屬性的值

writable: 屬性的值是否可被重寫（默認為false）

configurable: 總開關，是否可配置，若為false, 則其他都為false（默認為false）

enumerable: 屬性是否可被枚舉（默認為false）

get: 獲取該屬性的值時調用

set: 重寫該屬性的值時調用

一個例子

var a= {}
Object.defineProperty(a,"b",{
   value:123
})
console.log(a.b)  //123
a.b = 456
console.log(a.b)  //123
a.c = 110
for (item in a) {
    console.log(item, a[item])    //c 110
}

因為 writable 和 enumerable 默認值為 false, 所以對 a.b 賦值無效，也無法遍歷它

configurable

總開關，是否可配置，設置為 false 後，就不能再設置了，否則報錯， 例子

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Object.defineProperty(a,"b",{
  configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

writable

是否可重寫

var a = {}; 

Object.defineProperty(o, "b", { 
    value : 
 
123,
    writable : false });

console.log(a.b); // 打印 37
a.b = 25; // 沒有錯誤拋出（在嚴格模式下會拋出，即使之前已經有相同的值）
console.log(o.a); // 打印 37， 賦值不起作用。

enumerable

屬性特性 enumerable 定義了對象的屬性是否可以在 for...in 循環和 Object.keys() 中被枚舉

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

enumerable改為false

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:false //註意咯這裏改了
})
console.log(Object.keys(a));// 打印[]

set 和 get

如果設置了 set 或 get, 就不能設置 writable 和 value 中的任何一個，否則報錯

var a = {}
Object.defineProperty(a, ‘abc‘, {
    value: 123,
    get: function() {
        return value
    }
})
//Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>
　　　　at Function.defineProperty 

對目標對象的目標屬性 賦值和取值 時， 分別觸發 set 和 get 方法

var a = {}
var b = 1
Object.defineProperty(a,"b",{
  set:function(newValue){
      b = 99;
    console.log("你要賦值給我,我的新值是"+newValue);
  },
  get:function(){
    console.log("你取我的值");
    return 2 //註意這裏，我硬編碼返回2
  }
})
a.b = 1 //打印 你要賦值給我,我的新值是1
console.log(b)        //打印 99
console.log(a.b)    //打印 你取我的值
                    //打印 2    註意這裏，和我的硬編碼相同的

上面的代碼中，給a.b賦值，b的值也跟著改變了。原因是給a.b賦值，自動調用了set方法，在set方法中改變了b的值。vue雙向綁定的原理就是這個。

參考：https://www.cnblogs.com/weiqu/p/5860945.html

Object.defineProperty()方法學習筆記