欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

浅谈Object.defineProperty与Proxy的区别

程序员文章站 2022-07-12 21:54:54
...

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