解析神奇的 Object.defineProperty
這個方法了不起啊。。vue.js是通過它實現雙向繫結的。。而且Object.observe也被草案發起人撤回了。。所以defineProperty更有必要了解一下了。
幾行程式碼看他怎麼用
var a= {}
Object.defineProperty(a,"b",{
value:123
})
console.log(a.b);//123
很簡單,它接受三個引數,而且都是必填的。。
傳入引數
-
第一個引數:目標物件
-
第二個引數:需要定義的屬性或方法的名字。
-
第三個引數:目標屬性所擁有的特性。(descriptor)
前兩個引數不多說了,一看程式碼就懂,主要看第三個引數descriptor,看看有哪些取值
descriptor
他又以下取值,我們簡單認識一下,後面例子,挨個介紹。
-
value:屬性的值(不用多說了)
-
writable:如果為false,屬性的值就不能被重寫,只能為只讀了
-
configurable:總開關,一旦為false,就不能再設定他的(value,writable,configurable)
-
enumerable:是否能在for...in迴圈中遍歷出來或在Object.keys中列舉出來。
-
get:一會細說
-
set:一會細說
descriptor 預設值
我們再看看第一個例子
var a= {}
Object.defineProperty(a,"b",{
value:123
})
console.log(a.b);//123
我們只設置了 value,別的並沒有設定,但是第一次的時候 可以簡單的理解為(暫時這樣理解)它會預設幫我們把writable,configurable,enumerable。都設上值,而且值還都是false。。也就是說,上面程式碼和下面是等價的的(僅限於第一次設定的時候)。
var a= {}
Object.defineProperty(a,"b",{
value:123,
writable:false,
enumerable:false,
configurable:false
})
console.log(a.b);//123
以上非常重要哦。。並且以上理解對set 和 get 不起作用哦
configurable
總開關,第一次設定 false 之後,,第二次什麼設定也不行了,比如說
var a= {}
Object.defineProperty(a,"b",{
configurable:false
})
Object.defineProperty(a,"b",{
configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b
就會報錯了。。
注意上面講的預設值。。。如果第一次不設定它會怎樣。。會幫你設定為false。。所以。。第二次。再設定他會怎樣?。。對嘍,,會報錯
writable
如果設定為fasle,就變成只讀了。。
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"]
改為false
var a= {}
Object.defineProperty(a,"b",{
value:3445,
enumerable:false //注意咯這裡改了
})
console.log(Object.keys(a));// 列印[]
for...in 類似,不贅述了
set 和 get
在 descriptor 中不能同時設定訪問器(get 和 set)和 wriable 或 value,否則會錯,就是說想用 get 和 set,就不能用 writable 或 value 中的任何一個。
set 和 get,他倆幹啥用的的。
var a= {}
Object.definePrope`請輸入程式碼`rty(a,"b",{
set:function(newValue){
console.log("你要賦值給我,我的新值是"+newValue)
},
get:function(){
console.log("你取我的值")
return 2 //注意這裡,我硬編碼返回2
}
})
a.b =1 //列印 你要賦值給我,我的新值是1
console.log(a.b) //列印 你取我的值
//列印 2 注意這裡,和我的硬編碼相同的
簡單來說,這個 “b” 賦值或者取值的時候會分別觸發 set 和 get 對應的函式。
這就是實現 observe的關鍵啊。