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

最新推荐文章于 2024-09-27 08:32:19 发布

原创最新推荐文章于 2024-09-27 08:32:19 发布 · 383 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端 #es6

收录于

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

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