前端练习30 间谍活动

小编 2026-06-07 阅读:1436 评论:0

知识点函数 Proxy 题目完成间谍函数spy，它可以潜伏到任何一个函数当中，监听它们的所有活动。spy接受一个函数作为参数，返回一个被间谍潜伏以后的函数。 let america =...

知识点

函数
Proxy

题目

完成间谍函数spy，它可以潜伏到任何一个函数当中，监听它们的所有活动。spy接受一个函数作为参数，返回一个被间谍潜伏以后的函数。

let america = (a, b) => a + b

america = spy(america)
america(1, 2) // => 3

spy返回的函数和原来的函数的功能一样，但是它悄悄记录了每一次执行的参数和执行结果，都存放到一个calls数组里面：

america(1, 2)
america(3, 4)

america.calls[0].args // => [1, 2]
america.calls[0].result // => 3

america.calls[1].args // => [3, 4]
america.calls[1].result // => 7

注意，spy可以支持潜伏到对象方法当中：

let user = {
  name: \'Jerry\',
  getName () {
    return this.name
  }
}

user.getName = spy(user.getName)
user.getName() // => \'Jerry\'
user.getName.calls[0].result // => \'Jerry\'

另外，不要修改被spy的函数（你应该返回一个全新的函数），否则会被敌人发现。

实现

首先明确，spy的返回值应该是一个函数，要完成原有函数fn的功能，所以要在返回的函数里面调用fn

这里要注意的是，spy支持到对象中的调用，就必须对this进行处理，所以返回的函数不能使一个箭头函数，而且在调用fn的时候需要将我们返回的函数的this传给fn，所以fn应该使用call或者apply调用

此外，调用信息要保存在calls数组中，这个数组是返回的新函数的一个静态属性，直接newFn.calls = []直接这样定义即可。

所以我的一个实现是：

const spy = (fn) => {
  let resFn = function (...rest) {
    const result = fn.apply(this, rest);
    resFn.calls.push({
      args: rest,
      result,
    });
    return result
  };
  resFn.calls = [];
  return resFn
};

另一种尝试

想过用Proxy实现，但是使用了Proxy的话会导致原有的函数被修改，我没想到使用Proxy不修改原函数的方法。

笨死了。

在不考虑这一点的情况下，可以使用Proxy实现。

let p = new Proxy(target, handler);

我们这里要拦截的是函数调用行为，所以在Proxy的第二个参数中是对apply方法的处理。handler.apply()方法用于拦截函数的调用。

同时，我们使用Reflect.apply完成原有函数的行为

所以：

const spy = (fn) => {
  let calls = [];
  const resFn = new Proxy(fn, {
    apply(target, thisArg, argumentsList) {
      const result = Reflect.apply(target, thisArg, argumentsList);
      calls.push({
        args: argumentsList,
        result,
      });
      return result;
    }
  });
  resFn.calls = calls;
  return resFn
};