Proxy 和 DefineProperty 区别

Proxy 让我们看一下MDN官网对其如何解释的。 > 请注意两个关键词：基本操作、拦截和自定义。 由此引出，什么是对象基本操作？ 假设现在有一个对象const obj = {};。 此时我们可以对其进行如下操作： js const obj = {}; obj.a = 3; console.log(obj.a); Object.setPrototypeOf(obj, { a: 3 }); Object.getPrototypeOf(obj); for (const key in obj) { // ... } 上面所有一系列操作，最终在运行时内部会转换成针对这个对象的一个基本操作。 js // 比如： 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 无法拦截任何，只是基本操作之一。最多也是对现有对象的一个拦截而已，而且是不全面的。