object.defineProperty()實現(xiàn)雙向數(shù)據(jù)綁定

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ù)劫持歌殃。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蝙云,隨后出現(xiàn)的幾起案子挺份,更是在濱河造成了極大的恐慌,老刑警劉巖贮懈,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匀泊,死亡現(xiàn)場離奇詭異,居然都是意外死亡朵你,警方通過查閱死者的電腦和手機各聘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來抡医,“玉大人躲因,你說我怎么就攤上這事〖缮担” “怎么了大脉?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長水孩。 經常有香客問我镰矿,道長,這世上最難降的妖魔是什么俘种? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任秤标,我火速辦了婚禮,結果婚禮上宙刘,老公的妹妹穿的比我還像新娘苍姜。我一直安慰自己,他們只是感情好悬包,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布衙猪。 她就那樣靜靜地躺著,像睡著了一般布近。 火紅的嫁衣襯著肌膚如雪垫释。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天吊输,我揣著相機與錄音饶号,去河邊找鬼。 笑死季蚂,一個胖子當著我的面吹牛茫船,可吹牛的內容都是我干的琅束。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼算谈,長吁一口氣:“原來是場噩夢啊……” “哼涩禀!你這毒婦竟也來了?” 一聲冷哼從身側響起然眼,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤艾船,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后高每,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體屿岂,經...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年鲸匿,在試婚紗的時候發(fā)現(xiàn)自己被綠了爷怀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡带欢,死狀恐怖运授,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情乔煞,我是刑警寧澤吁朦,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站渡贾,受9級特大地震影響逗宜,放射性物質發(fā)生泄漏。R本人自食惡果不足惜剥啤,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一锦溪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧府怯,春花似錦、人聲如沸防楷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽复局。三九已至冲簿,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亿昏,已是汗流浹背峦剔。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留角钩,地道東北人吝沫。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓呻澜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惨险。 傳聞我的和親對象是個殘疾皇子羹幸,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內容