js中的訪問器屬性中的getter和setter函數實現數據雙向綁定

時間 2019-11-18

標籤訪問屬性 getter setter 函數實現數據雙向綁定欄目 JavaScript 简体版

原文原文鏈接

　　嗯，以前在讀js紅寶書的時候，在對象那一章有介紹屬性類型。第一種數據類型指的是數據屬性，第二種是訪問器屬性。在初識vue的時候，其雙向數據綁定也是基於訪問器屬性中的getter和setter函數原理來實現的。本篇文章就着重解析這兩個函數的工做原理。javascript

首先，咱們先建立一個a對象，並給他定義了一個默認的屬性_b,_b前面的下劃線是一種經常使用的記號，用於表示只能經過對象方法訪問的屬性。

var a={
　　_b=5;
};

接着定義一個屬性爲'c'的訪問器屬性，該屬性包含一個get和set函數，get函數用來返回_b的值，set函數用來計算經處理過的_b的值，注意，訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義。

1 Object.defineProperty(a,'c',{ 2     get:function(){ 3         this._b=this._b-1
4         return this._b; 5 }, 6     set:function(newValue){ 7         return this._b=newValue; 8 } 9 })
　　  console.log(a.c) //4
　　　　　console.log(a.c) //3
　　 a.c=10;
　　console.log(a._b,a.c);//10 9

　　當咱們第一次讀取a.c的時候，首頁會進入get函數，get函數裏面會返回4這個值，當第二次讀取a.c的值，get函數返回3。vue

　　接着，設置a.c=10，進set函數設置a._b的值，此時a._b的值爲10，而後進入get函數，讀取get函數，a._b的值變成9；java

利用這個原理，實現一個low版本的雙向數據綁定，代碼以下

 1 <body>
 2         <input type="text" id="inputs"/>
 3         <span id="span"></span>
 4         <script type="text/javascript">
 5             
 6             var j={  7                 val:''
 8  }  9             Object.defineProperty(j,'value',{ 10                 get:function(){ 11                     return this.val; 12  }, 13                 set:function(newValue){ 14                     this.val=newValue; 15  } 16  }) 17             inputs.onkeyup=function(){ 18                 j.value=this.value; 19                 span.innerHTML=j.val; 20  } 21         </script>
22     </body>