proxy+ Object.defineProperty

╰+哭是因爲堅強的太久メ 2022-12-20 11:28 95阅读 0赞

# proxy+ Object.defineProperty #

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  proxy+ Object.defineProperty
 *  proxy
 *  Object.defineProperty
 *  proxy+ Object.defineProperty异同

--------------------

# proxy #

# Object.defineProperty #

<input type="text" id="textInput" >
      输入：<span id="textSpan"></span>  
    
     var obj = { },
        textInput = document.querySelector("#textInput"),  //输入
        textSpan = document.querySelector("#textSpan");    //输出
        //拦截
        Object.defineProperty(obj, 'name', { 
              get: function () { 
                    console.log('get');
                    return v
              },
              set: function (val) { 
                    console.log('set');
                    v = val
              }
        });
        //实现双向绑定
        textInput.onkeyup = function (){ 
          obj.name = textInput.value;
          textSpan.innerHTML = obj.name;
        }

![在这里插入图片描述][20201112104749437.png_pic_center]

# proxy+ Object.defineProperty异同 #

Object.defineProperty()  
优点：可以更好的拦截  
缺点：无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应(虽说对常用的方法进行了处理，但然存在局限性)；只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

proxy  
优点：可以劫持整个对象，并返回一个新对象；有13种劫持操作  
缺点：兼容性不好

//proxy与Object.defineProperty异同 
        var Obj = { }
        Object.defineProperty(Obj, 'a', { 
              get: function () { 
                    console.log('get');
                    return v
              },
              set: function (val) { 
                    console.log('set');
                    v = val
              }
        });
        Obj.a = [] // set [1,2,3]
        Obj.a.push('1') // get 
        Obj.a[0] = 1 // get
        Obj.a.pop(1) // get 
        Obj.a = [1, 2, 3] // 
    
    
        var arr = [];
        var p = new Proxy(arr, { 
              get: (target, key) => { 
                console.log('get')
                return key in target ? target[key] : undefined   
              },
              set: (target, key, value) => { 
                console.log('set')
                target[key] = value
                return true
              }
        })
        p.push(1);
      get  // 获取数组arr的push方法
      get  // 获取数组arr的length属性
      set  // 设置arr[0] = 1
      set  // 设置数组arr长度为1

[20201112104749437.png_pic_center]: /images/20221120/e1b7ca200c07497aa3eaeed0040b1554.png