javascript - `Object.defineProperty` 通过 `Proxy` 劫持对象为什么会执行 2 次？

Question

可以直接把下面代码拷贝到调试窗口运行：

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 输出有 2 次：

test  {}test  #document

问题，执行 2 次的原理是设么呢？问过 GPT-4o，给出答案是这样的：

第一次 apply 调用：代理对象的 apply 方法被触发。
第二次 apply 调用：代理对象内部调用了 thisArgs.querySelector.apply(document, args);，即调用 document.querySelector。
如果在 thisArgs.querySelector.apply(document, args); 中， querySelector 方法内部再次调用了 querySelector，则代理对象的 apply 方法会再次被触发。

我不太理解的地方：

• 我代理的对象是 document.querySelector，但是第一次的上下文是 {}？
• 第二次又是从哪里触发的？

Answer 1

收益群友启发得到的答案，关键点看 thisArgs。

• 当我第一次调用 test.querySelector 的时候返回的是 Proxy 代理对象
• 在 get 方法中 thisArgs 指向 test，也就是 {}
• 在 get 方法中返回的是 thisArgs.querySelector.apply，就相当于 test.querySelector.apply，通过 apply 将上下文指向 document
• 因为 test.querySelector.apply，于是会再次执行一遍 Object.defineProperty
• 这个时候 Proxy 对象中的 get 方法 thisArgs 指向 document，于是相当于 document.querySelector.apply(document, ...)，也就不再和 test 有关联了

总计 2 次

Answer 2

解答

第一次 apply 调用

当你执行 test.querySelector("body") 时，首先会触发 Object.defineProperty 为 test.querySelector 定义的 getter 函数。这个函数返回一个新的 Proxy 对象，该对象包裹了 document.querySelector 函数。但是，在返回 Proxy 对象之前，并没有实际调用 document.querySelector，只是创建了一个可以代理它的对象。

然而，由于你正在通过 test.querySelector 访问该属性，所以 JavaScript 会自动调用 getter 函数来获取 test.querySelector 的值。这个 getter 函数返回了一个 Proxy 对象，但是在这个点上，你并没有直接调用这个 Proxy 对象所代理的函数（即 document.querySelector）。

然而，当 JavaScript 引擎看到 test.querySelector 后面跟着括号和参数（即函数调用表达式）时，它会尝试调用这个表达式的结果。由于 getter 函数返回了一个 Proxy 对象，所以实际上是在调用这个 Proxy 对象。因此，第一次 apply 陷阱被触发，此时的 thisArgs 是 undefined（因为你在 getter 函数中没有绑定任何上下文给 Proxy 对象），所以打印出来是 {}（在某些环境中，undefined 或未绑定上下文的 this 值会被转换成空对象）。

第二次 apply 调用

在 Proxy 对象的 apply 陷阱中，你调用了 thisArgs.querySelector.apply(document, args);。这里，thisArgs 实际上应该是 Proxy 调用时的上下文（在你的例子中是 undefined），但由于你硬编码了 document 作为上下文，所以实际上是调用了 document.querySelector。

当 document.querySelector 被调用时，由于它也是一个函数，如果它内部或其调用链中的任何函数再次调用了 querySelector（比如，如果某个元素有一个 querySelector 方法，并且它在查找过程中被调用了），那么理论上可能会再次触发 Proxy 的 apply 陷阱。但是，在你的例子中，document.querySelector 是直接调用的，并没有在内部再次调用 querySelector，所以只触发了这一次 apply 陷阱。

修改后的代码和解释

为了更清晰地看到发生了什么，我们可以稍微修改一下你的代码：

const test = {    // 初始的 querySelector 方法（如果需要的话）    // querySelector() {} // 在这个例子中，我们不需要这个方法};Object.defineProperty(test, "querySelector", {    get() {        console.log('Getter called'); // 添加日志以查看 getter 的调用        return new Proxy(document.querySelector, {            apply(target, thisArg, args) {                console.log('Proxy apply called with thisArg:', thisArg);                return target.apply(document, args); // 直接使用 target 而不是 thisArgs.querySelector            }        });    }});// 执行代码test.querySelector("body");

运行上述代码，你会看到以下输出：

Getter calledProxy apply called with thisArg: undefined

这清楚地显示了 getter 函数被调用一次（以获取 Proxy 对象），然后 Proxy 的 apply 陷阱被调用一次（以代理对 document.querySelector 的调用）。