解读Object.defineProperty()

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图演示，哈哈哈