Object.defineProperty与Proxy对比【简单易懂】

简介

JavaScript 提供了多种方式来定义和修改对象的属性。Object.defineProperty() 方法允许精确控制对象属性的特性，而 Proxy 对象则提供了一种更为强大和灵活的方式来拦截和自定义操作（如属性查找、赋值、枚举等）。

语法对比

Object.defineProperty()

Object.defineProperty(obj, prop, descriptor);

• obj：要在其上定义属性的对象。
• prop：要定义或修改的属性的名称。
• descriptor：属性描述符，可以包含 value, writable, enumerable, configurable。

Proxy

new Proxy(target, handler);

• target：要使用 Proxy 包装的目标对象。
• handler：一个对象，其属性是当执行操作时 Proxy 调用的函数。

实践对比

Object.defineProperty() 示例

let obj = {};
Object.defineProperty(obj, 'prop', {
  value: 42,
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.prop); // 输出: 42

Proxy 示例

let target = {};
let handler = {
  get: function(obj, prop) {
  	//也可以使用es6中Reflect语法：
  	// return Reflect.get(obj, prop) : 'default';
    return prop in obj ? obj[prop] : 'default';
  }
};
let proxy = new Proxy(target, handler);
proxy.prop = 42;
console.log(proxy.prop); // 输出: 42
console.log(proxy.other); // 输出: 'default'

Proxy 解决的问题

1. 拦截器的多样性：
   Proxy 可以拦截包括属性访问、赋值、枚举、函数调用等在内的多种操作，而 Object.defineProperty() 主要用于定义或修改属性的特性。

2. 动态行为：
   Proxy 允许在运行时动态地定义行为，动态的添加属性，删除属性，动态属性判断，返回计算后的结果等

3. 继承：
   使用 Object.defineProperty() 时，如果对象的属性已经被定义为不可配置，那么无法再次使用 Object.defineProperty() 修改它。而 Proxy 可以绕过这个问题，因为它提供了一种间接操作对象的方式。

4. 性能：
   对于某些特定的用例，Proxy 可能提供更好的性能，因为它可以减少对属性描述符的多次检查。

5. 安全性：
   Proxy 可以用来创建安全的代理，例如，可以防止对象的属性被删除或修改。(在改变时先对值进行判断，安全才能改变）

结论

• 虽然 Object.defineProperty() 在定义或修改属性时提供了细粒度的控制，但 Proxy 提供了一种更为强大和灵活的方式来操作对象。
• Proxy 能够解决 Object.defineProperty() 所不能解决的问题，尤其是在需要拦截多种操作或实现复杂逻辑时。