Object.defineProperty 和 Proxy 双重劫持 querySelector 时，为何会出现两次执行？

Object.defineProperty 与 Proxy 双重劫持对象执行原理解析

在提供的问题中，通过 Object.defineProperty 和 Proxy 对 querySelector 的劫持引入了疑惑，因为它执行了两次。

执行原理

• 第一次执行：

  • 劫持 test 对象的 querySelector 属性，利用 Proxy 创建代理对象。
  • 当首次调用 test.querySelector 时，会触发代理对象的 apply 方法，它会记录 thisArgs 的上下文 ({}) 并返回被劫持的 document.querySelector 函数。

• 第二次执行：

  • 在代理对象的 apply 方法中调用了 thisArgs.querySelector.apply(document, args)。
  • 此时，thisArgs 指向 test，而 querySelector 属性已被劫持，导致再次执行 apply 方法。
  • 然而，这一次，thisArgs 指向 document，因为它在之前通过 apply 改变了上下文。
  • 因此，现在调用的是 document.querySelector.apply(document, …)，与 test 没有任何关联。

关键点：thisArgs

理解执行过程的关键在于监视 thisArgs 的上下文变化。随着劫持的展开，它从指向 test 变为指向 document。每次 apply 方法调用时，thisArgs 的上下文都会影响执行的函数。