深入剖析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的含义，并谨慎使用，对于避免意外行为至关重要。
