深入剖析object.defineproperty与proxy结合引发的双重apply调用
本文将深入分析Object.defineProperty和Proxy结合使用时，Proxy的apply方法被调用两次的原因。以下代码片段是问题的核心：
const test = { querySelector() {}};Object.defineProperty(test, "querySelector", { get() { return new Proxy(document.querySelector, { apply(target, thisArgs, args) { console.log('test', thisArgs); return thisArgs.querySelector.apply(document, args); } }); }});// 执行代码test.querySelector("body");
运行这段代码，控制台将打印两次“test”，分别对应不同的thisArgs上下文。这是因为thisArgs的指向变化以及apply方法的调用机制。
第一次apply调用: 当执行test.querySelector("body")时，test.querySelector的getter方法被触发，返回一个Proxy对象。这个Proxy对象的apply方法立即被调用，此时thisArgs指向test对象，也就是一个空对象{}。
关键的第二次回调: 在Proxy的apply方法内部，我们调用了thisArgs.querySelector.apply(document, args)。由于thisArgs指向test，这行代码等价于test.querySelector.apply(document, args)。 这行代码再次触发了test.querySelector的getter方法，因为test.querySelector是通过Object.defineProperty定义的，并再次返回一个新的Proxy对象。这个新的Proxy对象的apply方法随后被调用，这次thisArgs指向document对象，因为apply方法将上下文切换到了document。
因此，两次apply方法调用的thisArgs分别指向{}和document，导致控制台输出两次“test”，并分别对应不同的上下文。 这并非document.querySelector自身递归调用导致的，而是由于thisArgs的指向变化和Object.defineProperty的getter方法被两次触发所致。 问题的根源在于在Proxy的apply方法内部再次访问了test.querySelector，从而再次触发了getter，造成了无限递归的可能性（此处因为test.querySelector是一个空函数，避免了无限递归）。
为了避免这个问题，应该直接使用target，而不是thisArgs.querySelector：
const test = { querySelector() {}};Object.defineProperty(test, "querySelector", { get() { return new Proxy(document.querySelector, { apply(target, thisArgs, args) { console.log('test', thisArgs); return target.apply(document, args); // 使用 target 代替 thisArgs.querySelector } }); }});test.querySelector("body");
修改后的代码只调用apply一次，解决了双重调用的问题。 这说明了在Proxy的handler方法中，正确理解target和thisArgs的含义，并谨慎使用，对于避免意外行为至关重要。
以上就是Object.defineProperty与Proxy结合使用时，Proxy的apply方法为何会被调用两次？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1503707.html
微信扫一扫 
支付宝扫一扫 
