浅谈Object.defineProperty与Proxy的区别

Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，即返回的还是目标对象本身。

let obj = {
    name: '测试',
    age: 89
  };
  // 这个API没办法兼容 IE8
  // Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
   let p = Object.defineProperty(obj, 'name', {
    value: '默认的', // 给 obj.name 赋值，没有默认是undefined
    configurable: true,  // 设置该属性是否可被删除  默认是false
    enumerable: true, // 该属性是否可枚举 默认是false
    writable: true,  // 该属性是否可以进行赋值操作（更改value的值）  默认是false
  });
  // 返回的还是原来的对象（原来的堆地址）
  console.log(p === obj); // true 

  let newVal = '';
  // Object.defineProperty() 一次只能监听一个属性
  Object.defineProperty(obj, 'sex', { // 如果监控对象没有改属性，则给对象加上
    get(){
      // 每当获取 obj.sex 值的时候会触发这个函数
      // 获取到的值是 get 函数的返回值
      console.log('get');
      // return 'get'; // 记得要return 
      // 如果返回的是一个固定的值，那么obj.sex的值就一直是固定的，改不了
      // 想要给 sex 动态赋值，需要借助第三方变量
      return newVal;
    },
    set(val){
      // 每当给 obj.sex 进行赋值的时候会触发这个函数，val是赋值的新值
      console.log('set',val);
      newVal = val;
      // obj.sex = val;  // 千万不能这样写，是死递归(一直在触发set函数)
    }
  });
  console.log(obj.sex); // 获取的是 get函数返回值

Proxy

语法：const p = new Proxy(target, handler)

let obj2 = {
    name: 'proxy',
    age: 89,
    sex: 11
  };
  
  let pp = new Proxy(obj2, {
    // 凡是获取 pp 对象的任意一个属性值，都会触发这个函数
    get(obj, key){
      // obj就是被代理的对象 obj2；key是操作的属性名
      // console.log(arguments);
      // console.log(obj === obj2); // true
      console.log(obj, key);

      // 记得要return
      return obj[key];
    },
    // 凡是给 pp 对象的任意一个属性进行赋值，都会触发这个函数
    set(obj, key, newVal){
      // 
      console.log('set');
      obj[key] = newVal; // 这样写不会造成死递归的原因：代理的是整个对象（堆内存），只是改变其中的一个属性值，不会改变整个堆地址
    }
  });

  // 返回的是一个新对象（跟原来的堆地址不一样），但是属性名跟目标对象obj的还是一样的
  console.log(obj2 === pp); // false