Object.defineProperty()解讀

• 第一個栗子：完成js雙向數據綁定(借用網上的例子)

  1. 起首，將構造先搭建好

         <input type="text" id="txt1">
         <input type="text" id="txt2">

  2. 體式格局一：運用最基本的寫法

     document.addEventListener('keyup', function (e) {
         var str = e.target.value||"";
         document.getElementById("txt1").value = str;
         document.getElementById("txt2").value = str;
     })

     該要領運用主動賦值的體式格局同步數據

  3. 體式格局二：Object.defineProperty()
     將一切的監聽和相應操縱交給Object的自定義存取器屬性，先看完成的代碼，稍後詳細解讀2333333

     /* 只需給obj.dataBind賦值，就會觸發set要領，只需接見ob.dataBind，就會觸發get要領 */
     var obj = {};
     Object.defineProperty(obj, 'dataBind', {
         get: function () {
             return this.newValue;
         },
         set: function (newValue) {
             this.newValue = newValue || "";
             document.getElementById('txt1').value = this.newValue;
             document.getElementById('txt2').value = this.newValue;
         }
     })
     document.addEventListener('keyup', function (e) {
         obj.dataBind = e.target.value;  /*這步操縱是挪用obj.dataBind.set(e.target.value)*/
     })

     這裏的dataBind屬性是會替代obj的默許的dataBind，如果有設置的話。

  4. 運轉

     

• 第二個栗子：完成階乘

  1. 代碼：

     <input type="number" id="factorial" placeholder="請數輸入階乘数字">
     <p></p>

     /*
     *運用get/set特徵完成階乘功用
     */ 
     var obj = {};
     Object.defineProperty(obj,"factorial",{
         get:function(){
             return this.result;
         },
         set:function(num){
             this.result = 1;
             for(var i=1;i<=num;i++){
                 this.result *= i;
             }
         }
     })
     
     document.addEventListener("keydown",function(e){
         var even = e||event;
         if(even.keyCode==13){
             obj.factorial = document.getElementById("factorial").value;
             document.getElementsByTagName("p")[0].innerText = "階乘的結果是："+obj.factorial;
         }
     })

  2. 運轉

     

• 要轉變屬性的get/set特徵，有兩種體式格局：

  1. 設置單個屬性：Object.defineProperty()
     該要領會直接在一個對象上定義一個新屬性，或許修正一個對象的現有屬性，並返回這個對象。
     默許情況下，運用Object.defineProperty增加的屬性是不可變的。
     語法：Object.defineProperty(obj,prop,descriptor)

     • obj:須要定義屬性的對象
     • prop：須要定義或修正的屬性名
     • descriptor：被定義或修正的屬性形貌
  2. 設置多個屬性Object.defineProperties()
     語法: Object.defineProperties(obj, props)

• get/set

  • get和set屬性稱為“存取器屬性”，當屬性被定義為存取器屬性時，js會疏忽賦值的屬性，直接運用定義的get或set的值。
  • get是讀取屬性時挪用，平常要返回，set是寫入屬性時挪用，不必返回。
  • get和set接見器不是對象的屬性，而是屬性的特徵，特徵只要在內部才會運用，也就是接口不會暴露。
  • get和set接見器能夠不必定義，不定義也能夠讀寫屬性值。只定義get，則屬性是只讀。只定義set，則屬性是只寫。

末了

我是參考網上許多例子，根據本身的思緒整理出來的，能夠也會有許多疏漏，先如許吧
居然學會了用gif圖演示，哈哈哈