有没有办法使用 Javascript ES6 代理来监视对象方法[重复]

考虑到以下对象是否可能

let target = {
 foo:0,
 result:[],
 bar(){
   //some code
 }
}

然后将所述对象包装在Proxy()

let handler = {
  get(){
    // code here
  },
  apply(){
    // code here
   }
 }

 target = new Proxy(target,handler);

接听电话bar()并将结果保存到results:[] ?

我已经尝试过几次了

let target = {
    called:0,
    results:[],
    foo(bar){
        return bar;
    },
}

let handler = {
    get(target,prop){
        console.log('Get Ran')
        return target[prop];
    },
    apply(target,thisArg,args){
        console.log('Apply Ran')
        // never runs
    }
}

target = new Proxy(target,handler);
target.foo();

此代码错过了 [[ apply ]] 但捕获了 [[ get ]] （如果没记错的话，对象方法调用作为两个操作完成，[[ get ]] [[ apply ]]）

let target = {
    called:0,
    results:[],
    foo(bar){
        return bar;
    },
}

let handler = {
    get(target,prop){
        return target[prop];
    },
    apply(target,thisArg,args){
        let product = target.apply(thisArg,args)
        return product;
    },
}

let prox = new Proxy(target.foo,handler);
    console.log(prox('hello'));

如果我将对象方法包装在代理中，它会捕获 [[ apply ]] 但我失去了对原始对象（ this ）的引用，因此失去了对结果数组的访问

我还尝试将方法代理嵌套在对象代理内。

有什么想法吗 ？

我的实际代码的 CodeSandBox https://codesandbox.io/s/frosty-kowalevski-8y4co?file=/src/index.js

// 代理的文档

代理MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Javascript.info/代理 https://javascript.info/proxy

// 关于代理的其他问题，但不是这个用例

了解 ES6 javascript 代理 https://stackoverflow.com/questions/48527262/understanding-es6-javascript-proxies

根据spec https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist

如果代理异常对象的 [[ProxyTarget]] 内部槽的初始值是具有 [[Call]] 内部方法的对象，则该对象仅具有 [[Call]] 内部方法。

因此，如果目标是 a，下面确实会捕获调用function

(new Proxy(() => 'hello', { apply: () => console.log('catched') }))() // 'catched

相反，如果目标没有调用方法，则没有代理

try {
  (new Proxy({}, { apply: () => console.log('catched') }))() // throws
} catch (e){ console.log('e', e.message)}

所以提示可能是代理 [get] then 而不是返回值（作为函数bar，代理该值以捕获最终调用

const p = new Proxy(
  { results: [], bar: () => { console.log('rywhite') } }, {
  get: (target, prop) => {
    if (prop !== 'bar') return target[prop]
    return new Proxy (target.bar, {
      apply () {
        target.results.push('what')
      }
    })
  }
})
p.bar // nothing bud'
p.bar(); console.log('res', p.results)
p.bar(); console.log('res', p.results)
p.bar(); console.log('res', p.results)

编辑：注意：没有必要每次都创建一个新的代理

在下面的代码中，返回相同的代理大约快两倍

const N = 1e6
{
  const target = { results: 0, bar: () => { console.log('rywhite') } }
  const p = new Proxy(
    target, {
    get: (() => {
      const barProxy = new Proxy (target.bar, {
        apply () {
          target.results++
        }
      })
      return (target, prop) => {
        if (prop !== 'bar') return target[prop]
        return barProxy
      }
    })()
  })
  console.time('go')
  for (let i = 0; i < N; ++i) { p.bar() }
  console.timeEnd('go')
  console.log('res', p.results)
}
{
  const p = new Proxy(
    { results: 0, bar: () => { console.log('rywhite') } }, {
      get: (target, prop) => {
        if (prop !== 'bar') return target[prop]
        return new Proxy (target.bar, {
          apply () {
            target.results++
          }
        })
      }
    })
  console.time('neweverytime')
  for (let i = 0; i < N; ++i) { p.bar() }
  console.timeEnd('neweverytime')
  console.log('res', p.results)
}