Proxy 和 DefineProperty 区别
11views
让我们看一下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这篇文档。上面罗列了对象所有的内部方法,即基本操作。
让我们回顾上一张图片中表格里的[[DefineOwnProperty]]
,相信你已经明白了。
Object.defineProperty() 其实调用的是
[[DefineOwnProperty]]
这个基本操作。
因此可以很容易得出两者区别: