Proxy 和 DefineProperty 区别

Proxy

让我们看一下MDN官网对其如何解释的。

请注意两个关键词：基本操作、拦截和自定义。

由此引出，什么是对象基本操作？

假设现在有一个对象const obj = {};。
此时我们可以对其进行如下操作：

const obj = {};

obj.a = 3;

console.log(obj.a);

Object.setPrototypeOf(obj, { a: 3 });

Object.getPrototypeOf(obj);

for (const key in obj) {

  // ...

}

上面所有一系列操作，最终在运行时内部会转换成针对这个对象的一个基本操作。

// 比如：

obj.a = 3; 会调用 [[Set]]

obj.a;     会调用 [[Get]]

Object.setPrototypeOf(obj, { a: 3 }); // [[SetPrototypeOf]]

Object.getPrototypeOf(obj); // [[GetPrototypeOf]]

// [[getOwnPropertyKeys]]

for (const key in obj) {

  // ...

}

我们可以参考ecma262这篇文档。上面罗列了对象所有的内部方法，即基本操作。

DefineProperty

让我们回顾上一张图片中表格里的[[DefineOwnProperty]]，相信你已经明白了。

Object.defineProperty() 其实调用的是 [[DefineOwnProperty]]这个基本操作。

区别

因此可以很容易得出两者区别：

1. Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。
2. defineProperty 无法拦截任何，只是基本操作之一。最多也是对现有对象的一个拦截而已，而且是不全面的。