Object.defineProperty()方法學習筆記
這是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()方法學習筆記