Object.defineProperty()方法會直接在一個對象上定義一個新屬性偏友,或者修改一個對象的現(xiàn)有屬性(屬性為響應式屬性),并返回此對象骨田。
語法:
Object.defineProperty(obj, prop, descriptor)
obj要定義屬性的對象癣漆。
prop要定義或修改的屬性的名稱或 descriptor要定義或修改的屬性描述符。
get:
屬性的 getter 函數(shù)涣澡,如果沒有 getter,則為 undefined丧诺。當訪問該屬性時入桂,會調用此函數(shù)。執(zhí)行時不傳入任何參數(shù)驳阎,但是會傳入 this 對象(由于繼承關系抗愁,這里的this并不一定是定義該屬性的對象)。該函數(shù)的返回值會被用作屬性的值搞隐。
默認為 undefined驹愚。
set:
屬性的 setter 函數(shù),如果沒有 setter劣纲,則為 undefined。當屬性值被修改時谁鳍,會調用此函數(shù)癞季。該方法接受一個參數(shù)(也就是被賦予的新值),會傳入賦值時的 this 對象倘潜。
默認為 undefined绷柒。
Object.defineProperty(person,'age',{
四個配置項:value enumerable writable configurable
// value:18, //給屬性添加值
// enumerable:true, //控制屬性是否可以枚舉,默認值是false
// writable:true, //控制屬性是否可以被修改涮因,默認值是false
// configurable:true //控制屬性是否可以被刪除废睦,默認值是false
兩個函數(shù)配置項:get() set()
//當有人讀取person的age屬性時,get函數(shù)(getter)就會被調用养泡,且返回值就是age的值
get(){
console.log('有人讀取age屬性了')
return number //更改number的值即時賦值給age
},
//當有人修改person的age屬性時嗜湃,set函數(shù)(setter)就會被調用,且會收到修改的具體值
set(value){
console.log('有人修改了age屬性澜掩,且值是',value)
number = value //同上
}
})
使用Object.defineProperty實現(xiàn)雙向數(shù)據(jù)綁定
var model = {};
Object.defineProperty(model,'txt',{
get:function(){},
set:function(val){
var span = document.getElementsByTagName('span')[0];
span.innerHTML = val;
}
})
var input = document.getElementsByTagName('input')[0];
input.oninput = function(){
model.txt = input.value;//必然觸發(fā)set函數(shù)
}
當我們使用 Object.defineProperty 對數(shù)組對象賦值有一個新對象的時候购披,會執(zhí)行set方法
同時 在雙向數(shù)據(jù)綁定的過程中 也運用到了數(shù)據(jù)劫持的概念
數(shù)據(jù)劫持 在使用或者設置某的對象的屬性的時候,通過一系列的代碼攔截此次的此次的行為肩榕。即可以在賦值過程中添加一些操作或者修改返回的結果刚陡。
給數(shù)據(jù)添加監(jiān)聽,一旦數(shù)據(jù)發(fā)生變化,就執(zhí)行視圖的修改操作筐乳,這個過程就是數(shù)據(jù)劫持歌殃。