您好,登錄后才能下訂單哦!
vue.js 2.0版的雙向數(shù)據(jù)綁定就是通過(guò)Object.defineProperty方法實(shí)現(xiàn)的,俗稱(chēng)屬性攔截器。
這么說(shuō)吧,vue.js是通過(guò)它實(shí)現(xiàn)雙向綁定的。俗稱(chēng)屬性攔截器。而且專(zhuān)門(mén)用來(lái)監(jiān)控對(duì)象屬性變化的Object.observe方法也被草案發(fā)起人撤回了(此方法在node環(huán)境中仍能使用)??梢?jiàn)defineProperty的威力之大。
Object.defineProperty() 不支持ie8
方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性,或者修改一個(gè)已經(jīng)存在的屬性, 并返回這個(gè)對(duì)象。
// 語(yǔ)法: /* * Object.defineProperty(obj,prop,descriptor) * @param: obj:需要定義屬性的對(duì)象; * prop:需要定義或修改的屬性; * descriptor:將被定義或修改屬性的描述符{} * 返回值 : 返回傳入函數(shù)的對(duì)象,即第一個(gè)參數(shù)obj */
對(duì)象里目前存在的屬性描述符主要有兩種形式: 數(shù)據(jù)描述符和存取描述符.
數(shù)據(jù)描述符: 擁有可寫(xiě)或不可寫(xiě)值的屬性*
可選鍵值:
configurable: 當(dāng)且僅當(dāng)configurable為true時(shí),改屬性描述符才能夠被改變,也能被刪除
enumerable: 當(dāng)其值為true時(shí),該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中,默認(rèn)為false
writable: 當(dāng)且僅當(dāng)該屬性的值為true時(shí),該屬性才能被賦值運(yùn)算符改變, 默認(rèn)為false。
value: 該屬性對(duì)應(yīng)的值,可以是任意有效的javascript的值(數(shù)值,對(duì)象,函數(shù)等),默認(rèn)為undefined
存取描述符: 由一對(duì)getter-setter函數(shù)功能來(lái)描述的屬性*
可選鍵值:
configurable: 當(dāng)且僅當(dāng)configurable為true時(shí),改屬性描述符才能夠被改變,也能被刪除
enumerable: 當(dāng)其值為true時(shí),該屬性才能夠出現(xiàn)在對(duì)象的枚舉屬性中,默認(rèn)為false
get: 給屬性提供getter的方法,如果沒(méi)有 getter 則為undefined。當(dāng)我們讀取某個(gè)屬性的時(shí)候,其實(shí)是在對(duì)象內(nèi)部調(diào)用了該 方法,此方法必須要有return語(yǔ)句。該方法返回值被用作屬性值。默認(rèn)為 undefined
set:設(shè)置屬性值的方法, 如果沒(méi)有 setter 則為 undefined。該方法將接受唯一參數(shù),并將該參數(shù)的新值分配給該屬性。默認(rèn)為 undefined。也就是說(shuō),當(dāng)我們?cè)O(shè)置某個(gè)屬性的時(shí)候,實(shí)際上是在對(duì)象的內(nèi)部調(diào)用了該方法
note:兩者不能同時(shí)定義, 否則報(bào)錯(cuò)==
get和set是我們今天要重點(diǎn)討論的兩個(gè)方法,先看一下他們的簡(jiǎn)單實(shí)例:
實(shí)例:
var a = {}; Object.defineProperty(a, 'b', { set: function(newValue) { console.log('賦值操作, 賦值' + newValue); }, get: function() { console.log('取值操作'); return 2; //這里需注意 我硬讓他返回2 } }); a.b = 1; // 賦值操作,賦值1 a.b; // 取值操作2
雖然我將a.b的值設(shè)置成了1,但是因?yàn)槲以趃et方法中始終返回了2,所以a.b的值一直是2。
那么,這就好玩兒了:我們可以在頁(yè)面監(jiān)聽(tīng)某個(gè)變量,當(dāng)變量發(fā)生變化的時(shí)候,我們就更新對(duì)應(yīng)的視圖。由數(shù)據(jù)來(lái)驅(qū)動(dòng)視圖的更新,是不是很熟悉?是的,vue .js的核心思想就是這個(gè)。我們寫(xiě)個(gè)小例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>defineProperty</title> </head> <body> <div id="test">這是一個(gè)測(cè)試</div> <script> var view = document.getElementById("test"); var data = {}; var i = 0; Object.defineProperty(data, "b", { set: function(newValue) { //當(dāng)data.b的值改變的時(shí)候更新#test的視圖 view.textContent = newValue; }, get: function() {} }); setInterval(function() { i++; data["b"] = "data.b的值更新了,我要更新視圖" + i; }, 2000); </script> </body> </html>
視圖的變化過(guò)程:
最開(kāi)始的視圖:
2秒后的視圖:
重點(diǎn)理解:
// 3.Object.defineProperty(obj,propertyName,{}):給對(duì)象添加屬性(指定描述符) const obj = { firstName: 'A', lastName: 'B', } // 給obj添加fullName屬性 // obj.fullName = 'A-B' /* 1.數(shù)據(jù)描述符 configurable: 是否可以重新定義 enumerable: 是否可以枚舉 value: 初始值 writable: 是否可以修改屬性值 2.訪(fǎng)問(wèn)描述符 get: 回調(diào)函數(shù),根據(jù)其它相關(guān)的屬性動(dòng)態(tài)計(jì)算得到當(dāng)前屬性值 set: 回調(diào)函數(shù),監(jiān)視當(dāng)前屬性值的變化,更新其它相關(guān)的屬性值 */ Object.defineProperty(obj,'fullName',{ get() { return this.firstName+'-'+this.lastName; }, set(value) { const names = value.split('-'); this.firstName = names[0]; this.lastName = names[1]; } }) console.log(obj.fullName);//A-B obj.firstName = 'C'; obj.lastName = 'D'; console.log(obj.fullName);//C-D obj.fullName = 'E-F'; console.log(obj.firstName,obj.lastName);//E F
Object對(duì)象有一個(gè)freeze的方法,用于實(shí)現(xiàn)對(duì)象屬性和方法的不可更改
// 使用方法: const arr = [1,2,3,4]; Object.freeze(arr); // 變量arr不可更改 arr.push(5); // 報(bào)錯(cuò):不能添加屬性
Object.definePropperty也可以實(shí)現(xiàn)規(guī)定變量的不可更改
const obj = { key: 'chris', vlaue: 'person' }; Object.defineProperty(obj, 'key', { configurable: false, // 不可刪除 writable: false, // 不可寫(xiě) }); })
若有不足請(qǐng)多多指教!希望給您帶來(lái)幫助!
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)億速云的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。