简单的双向绑定Object.defineProperty和Pro

基于Object.defineProperty

<input type="text" id="ipt1">
<h2 id="txt1"></h2>
<script>
  var ipt1 = document.querySelector('#ipt1'),
  txt1 = document.querySelector('#txt1');

  const obj1 = {};
  // 劫持obj1的val属性
  Object.defineProperty(obj1, 'val', {
    get: function() {},
    set: function(newVal) {
      ipt1.value = newVal;
      txt1.innerText = newVal;
    }
  });

  ipt1.addEventListener('input',function(event) {
    obj1.val = event.target.value;
  });
</script>

基于Proxy

<input type="text" id="ipt2">
<h2 id="txt2"></h2>
<script>
  var ipt2 = document.querySelector('#ipt2'),
  txt2 = document.querySelector('#txt2');

  const obj2 = {
    age: '芳龄18',
    arr: [1, 2]
  }
  // 监听p的属性
  // 新建一个对象p,具有obj2的所有属性-----浅拷贝
  const p = new Proxy(obj2, {
    get(target, key, value) {
      // 返回值
      return target[key];
    },

    set(target, key, value) {
      if (key === 'val') {
        ipt2.value = value;
        txt2.innerText = value;
      } else {
        target[key] = value;
      }
    }
  }) 
    ipt2.addEventListener('input',function(event) {
        p.val = event.target.value;
    });
</script>

Proxy所能够代理的范围

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。
handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。
handler.setPrototypeOf()

// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。
handler.isExtensible()

// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。
handler.preventExtensions()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.getOwnPropertyDescriptor()

// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
handler.defineProperty()

// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()

// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。
handler.ownKeys()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
handler.apply()

// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。
handler.construct()