Proxy 与 Object.defineProperty 优劣对比?

内容分享4小时前发布
0 0 0

答:

1:Proxy的优势:

  1. Proxy可以代理整个对象,而Object.defineProperty只能代理对象的某个属性
  2. Proxy可以代理数组,而Object.defineProperty无法代理数组
  3. Proxy可以代理动态增加的属性,而Object.defineProperty只能代理已经存在的属性
  4. Proxy可以代理删除属性的操作,而Object.defineProperty无法代理删除属性的操作
  5. Proxy可以代理函数调用,而Object.defineProperty无法代理函数调用
// Proxy
const obj = new Proxy({}, {
get(target, key, receiver) {
 console.log(`getting ${key}`);
 return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
 console.log(`setting ${key}`);
 return Reflect.set(target, key, value, receiver);
}
});
obj.name = 'Tom'; // setting name
console.log(obj.name); // getting name

2:Object.defineProperty的优势:

  1. Object.defineProperty的兼容性更好,支持IE9及以上版本,而Proxy只支持现代浏览器
  2. Object.defineProperty的性能比Proxy更好,由于Proxy需要进行拦截和处理,而Object.defineProperty只需要在属性访问时进行处理
  3. Object.defineProperty可以代理属性的getter和setter,而Proxy无法代理属性的getter和setter
// Object.defineProperty
const obj2 = {};
Object.defineProperty(obj2, 'name', {
  get() {
    console.log('getting name');
    return this._name;
  },
  set(value) {
    console.log('setting name');
    this._name = value;
  }
});
obj2.name = 'Tom'; // setting name
console.log(obj2.name); // getting name
© 版权声明

相关文章

暂无评论

none
暂无评论...