標籤：innerhtml 首頁 his 返回 屬性 綁定 利用 訪問 雙向
嗯，之前在讀js紅寶書的時候，在對象那一章有介紹屬性類型。第一種資料類型指的是資料屬性，第二種是訪問器屬性。在初識vue的時候，其雙向資料繫結也是基於訪問器屬性中的getter和setter函數原理來實現的。本篇文章就著重解析這兩個函數的工作原理。
var a={
_b=5;
};
1 Object.defineProperty(a,‘c‘,{2 get:function(){3 this._b=this._b-14 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。
接著，設定a.c=10，進set函數設定a._b的值，此時a._b的值為10，然後進入get函數，讀取get函數，a._b的值變成9；
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>
有興趣的同學可以嘗試做一下領悟。附上紅寶書此知識點在P143。
js中的訪問器屬性中的getter和setter函數實現資料雙向繫結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
