Object.defineProperty和Proxy结合时，apply方法为何会执行两次？

深入剖析：Object.defineProperty与Proxy结合引发的双重apply执行

本文将详细解释Object.defineProperty和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 {}和test [object HTMLDocument]。这并非document.querySelector自身递归调用导致，而是Object.defineProperty和Proxy组合使用时产生的特殊行为。

让我们分析thisArgs的变化。首次调用test.querySelector("body")时，get方法被触发，此时thisArgs指向test对象（{}）。Proxy的apply方法第一次执行，打印test {}。

BibiGPT-哔哔终结者

B站视频总结器-一键总结 音视频内容

28

查看详情

关键在于apply方法内部的调用：thisArgs.querySelector.apply(document, args)。由于thisArgs指向test，此行代码等效于test.querySelector.apply(document, args)。然而，test.querySelector由Object.defineProperty定义，它是一个带有get方法的属性。因此，调用test.querySelector会再次触发get方法，从而导致Proxy的apply方法第二次执行。

这次，thisArgs指向document对象，因为apply方法的上下文已改变。因此，Proxy的apply方法第二次执行，打印test [object HTMLDocument]。这并非Proxy自身递归调用，而是Object.defineProperty定义的querySelector属性的get方法在apply方法内部被再次调用所致。thisArgs上下文的改变是理解这一现象的关键。

总结： apply方法的两次执行并非源于document.querySelector的内部递归，而是因为Object.defineProperty定义的属性的get方法在Proxy的apply方法内部被再次调用，导致thisArgs上下文变化，最终触发Proxy的apply方法第二次执行。 理解thisArgs的上下文变化是解决此问题的关键。

以上就是Object.defineProperty和Proxy结合时，apply方法为何会执行两次？的详细内容，更多请关注php中文网其它相关文章！