Object.defineProperty()
了不起的方法,魔法函數,咱們的Vue和avalon的雙向綁定都是利用此方法實現的。
先看幾行代碼怎么用。
var obj={}
Object.defineProperty(obj,'name',{
value:'辛培鋮'
})
console.log(obj)
//就是這么簡單
參數列表
第一個參數 : 目標對象
第二個參數 : 需要添加或者定義的屬性名稱
第三個參數 : 目標屬性值所擁有的特性
前面兩個參數都懂,直接說第三個參數。
{
configurable: false,
enumerable: false,
writable: false,
value: null,
set: undefined,
get: undefined
}
//這是可以傳入的屬性,后面是該屬性的默認值
configurable :
屬性是否可以被配置,包括了是否可以刪除屬性,是否可以修改屬性等等...,比如我這個值為false,我如果要修改writable的話我需要把這個屬性設置為true。
enumerable :
屬性是否可以被枚舉,是否可以被for...in循環遍歷到,是否可以使用Object.keys()
writable :
屬性是否可以被重寫,包括是否可以重新復制。
value :
屬性的默認值
set :
屬性的監視器,一旦屬性被修改,這個方法會自動調用。
get :
屬性的訪問器,一旦屬性被訪問,這個方法會自動調用。
用代碼實現一下吧
var obj={}
Object.defineProperty(obj,'name',{
set:function(v){
console.log('我被改變了,改變的是'+v)
},
get:function(){
console.log('我被訪問了')
}
})
obj.name='辛培鋮';
console.log(obj.name)
這樣會觸發咱們的set和get。
執行 obj.name='辛培鋮' 的時候,出發了set(監視器)方法,但是由于 configurable 屬性默認為false,所以賦值失敗,但是不會引起報錯。
執行 console.log(obj.name)的時候,觸發了get(訪問器)方法,因為咱們obj.name的時候沒有執行任何的操作,所以被會被認為是訪問。
注意 :
在 descriptor 中不能 同時設置(get 和 set) 和 wriable 或 value，否則會錯，就是說想用(get 和 set)，就不能用（wriable 或 value中的任何一個。
