一、對象賦值的兩種方式

一是“=”賦值，一是Object.defineProperty方法，而當(dāng)下流行框架中廣泛應(yīng)用的雙向綁定和數(shù)據(jù)監(jiān)聽等，就是利用的第二種方式，關(guān)于此方法不多講，可參考

developer.mozilla.org/zh-CN/docs/…

需要注意一點的是，

var bValue; Object.defineProperty(o, "b", {get : function(){return bValue;},set : function(newValue){bValue = newValue;},enumerable : true,configurable : true });o.b = 38;復(fù)制代碼

雖然其中set方法是這樣寫的，

set : function(newValue){bValue = newValue;},復(fù)制代碼

所以此處的a.b=arg不同于一般的. 語法，而是已經(jīng)觸發(fā)了setter了

二、為什么Object.defineProperty能實現(xiàn)雙向綁定和數(shù)據(jù)監(jiān)聽呢

因為Object.defineProperty方法里有g(shù)etter和setter函數(shù)對，你可以把它理解為一個可以觸發(fā)的函數(shù)，觸發(fā)事件就是setter對應(yīng)的屬性被改變

eg：

var bValue = 38; Object.defineProperty(o, 'b', {get: function() { return bValue; },set: function(newValue) { bValue = newValue; you can do something, like update the new data to virual dom! },enumerable: true,configurable: true }); o.b; // 38 //屬性”b”被設(shè)置到對象o上，并且值為38。 //現(xiàn)在o.b的值指向bValue變量，除非o.b被重新定義 復(fù)制代碼

三、框架里的具體做法是怎樣的呢？

一句話描述，就是把在data里注冊的所有屬性都添加上對應(yīng)的getter和setter函數(shù)對。

形象點，可以參照下面的方法：使用defineProperty方法封裝一個監(jiān)聽屬性變動的函數(shù)。

var object = {name:'liwudi',age:34 } function changeIt(object) {function descripterFun(value) {return {enumerable: true,get: function () {console.log('get it');return value;},set: function (newvalue) {console.log('set it');value = newvalue;}}}for(var i in object){Object.defineProperty(object, i, descripterFun(object[i]))} } changeIt(object); console.log(object.name); object.name = '我是中國人'; console.log(object); 復(fù)制代碼

當(dāng)然，真正要解決的問題遠比上述復(fù)雜，比如更深層次的屬性要利用到遞歸方法等等。

參考資料：

blog.csdn.net/yuhk231/art…

blog.csdn.net/mapbar_fron…

轉(zhuǎn)載于:https://juejin.im/post/5be3a9def265da61171c3773

總結(jié)

以上是生活随笔為你收集整理的Object.defineProperty与双向绑定、数据监听的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。