Object.defineProperties() 和 proxy 在拦截处理上的区别

最新推荐文章于 2025-02-17 20:23:44 发布

面向对象面向君

最新推荐文章于 2025-02-17 20:23:44 发布

阅读量312

点赞数

文章标签： vue.js javascript 前端 es6

本文链接：https://blog.youkuaiyun.com/Mr_28/article/details/129719428

版权

defineProperties用于独立拦截对象属性的getter和setter，而Proxy对整个对象创建一层拦截。当对象包含子对象时，需要使用defineProperties递归处理，Proxy则能全面处理包括数组。尽管defineProperties能监听数组的下标变化，但无法捕捉length变更或push等方法。相比之下，Proxy能完整处理数组操作，但可能导致getter/setter多次触发。defineProperties不支持动态添加属性的拦截，而Proxy可以。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    defineProperties 是对对象上的每个属性进行独立拦截 getter 和 setter，proxy 是对整个对象增加了一层拦截并返回新的对象（并不会改变原对象）；
如果对象的子属性也是对象那需要通过 defineProperties 进行递归处理，proxy 默认只能响应 getter 而不能相应 setter，所以其实也需要对子对象进行递归处理；
defineProperties 对数组来说虽然可以监听到下标触发的 getter 和 setter，但对于 length 的改变和直接使用 push 等更改了数组长度的方法的调用则是监听不到的，proxy 对数组是可以进行完全处理的，但需要注意的是在调用 push 等改变原数组的方法时会导致 getter、setter 会多次触发；
defineProperties 由于是对每个已存在的对象属性进行的独立处理，所以无法在对象新增属性时自动生效，而 proxy 由于是对整个对象进行的拦截，所以对于新增属性也会生效。