Object.defineProperty与Proxy结合使用时，Proxy的apply方法为何会被调用两次？

深入剖析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方法为何会被调用两次？的详细内容，更多请关注php中文网其它相关文章！