借助 Proxy 实现回调函数执行计数

摘要：本文不深入分析惰性计算的内部原理后面打算多带带做一次分享，而是介绍下我是如何实现上面的回调函数执行计数。问题明确下需求或者说要解决的问题，针对如下的代码能够统计代码执行过程中传入的回调函数和的实际执行次数。

最近在做一个简化版的 Lazy.js：simply-lazy，目的是深入分析 Lazy.js 中惰性求值的实现，同时由于简化了实现过程，便于在分享（计划近期分享）时作为 demo 展示。

惰性求值的一个重要特性是延迟了计算过程，从而能够提升性能，例如：

Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  .map(i => i * 2)
  .filter(i => i <= 10)
  .take(3)
  .each(i => print(i))

注：为了书写方便，回调函数使用了 ES 的“=>”来定义。

这里对原始数据执行 map、filter 后只取前 3 个结果值，Lazy.js 的实现策略是 map、filter 中的回调函数也尽可能少地被调用，可以看下统计出的回调函数的调用次数：

demo 地址：http://www.luobotang.cn/simpl...
注意：需要浏览器环境支持 ES6 特性，建议使用较新版本的 Chrome 打开。

从上面的 demo 中可以看到，第三种情况下，虽然仍旧要执行与前面相同的 map、filter 的过程，但是由于最终只需要返回前 3 个结果值，此时 map、filter 的回调函数执行次数是减少了的。

本文不深入分析 Lazy.js 惰性计算的内部原理（后面打算多带带做一次分享），而是介绍下我是如何实现上面的回调函数执行计数。

明确下需求或者说要解决的问题，针对如下的代码：

Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  .map(i => i * 2)
  .filter(i => i <= 10)
  .take(3)
  .each(i => print(i))

能够统计代码执行过程中 map、filter 传入的回调函数（i => i * 2 和 i => i <= 10）的实际执行次数。

实现这个需求，可以采用粗暴的模式，例如：

var mapCount = 0
var filterCount = 0

Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  .map(i => { mapCount++; return i * 2 })
  .filter(i => { filterCount++; return i <= 10 })
  .take(3)
  .each(i => print(i))

console.log("map: " + mapCount)
console.log("filter: " + filterCount)

不过这样写的话我的 demo 页面展示的代码不久太丑了吗，计数的过程其实是额外的工作，写到 demo 代码里面也影响其他人阅读不是吗。

所以，我想实现不修改 demo 代码的计数。

其实在考虑需求的时候，就已经琢磨过要实现的话得采用哪些技术了。比较自然的想法，就是用“假”的 Lazy 函数来替换原有的 Lazy 函数，这样后续的调用过程就可以进行任意的 hack 的了。例如：

function FakeLazy(list) {
  var seq = Lazy(list)
  return {
    map() { /* ... */ },
    filter() { /* ... */ },
    take() { /* ... */ },
    each() { /* ... */ }
  }
}

貌似是可以的，也应该是可以的，因为后续的调用实际上是被“劫持”了，我可以把计数的代码添加到回调函数被调用的时候执行，例如：

map(fn) {
  var subSeq = seq.map(function(e, i){
    mapCount++
    return fn(e, i)
  })
  // ...
}

对于 filter 也要执行类似的处理，而 take、each 则直接调用原有的 seq 对象上的方法就好了。

另外，由于每次调用后都会产生一个新的序列对象（sequence），为了能够正常链接后续的调用，还要继续返回一个新的劫持的序列对象。有点麻烦，不过也能实现。

可以看到，这种“劫持”对象的过程，比较繁琐，不仅要劫持到关心的方法，还得保证对象其他的方法也能正常调用。而在 ES6/ES2015 中，有更好的技术可以采用：Proxy - MDN。

Proxy 这样使用：

var proxy = new Proxy(target, handler);

这样可以得到一个代理对象 proxy，与前面的“劫持”对象类似，在程序中直接使用 proxy 来替代原始的 target 对象。不过 Proxy 对象的强大之处在于，对于该代理对象的各种“请求”，会调用相应的 handler 中传入的回调函数。这样就不需要代理对象实现原始对象的所有功能，只需要处理那些关心的情况。

对于前面的情况，使用 Proxy 可以大致这样处理：

function FakeLazy(list) {
  var seq = Lazy(list)
  return Proxy(seq, {
    get(target, name) {
      if (name === "map" || name === "filter") {
        // 执行处理...
      } else {
        return target[name] // 不需要处理的情况直接返回原始对象的属性或方法
      }
    }
  })
}

返回的代理对象在被访问任何属性或方法时，都会被拦截，首先调用 handler 中的 get() 方法，这样除了要特殊处理的 map 和 filter，其他的直接返回原有属性或方法。

思路有了，然后就是具体的实现工作了。

首先看下页面处理逻辑，每个 demo 代码块我都包装在一个函数中的，然后将执行代码、执行结果、回调计数结果分别输出到页面上，也就是前面图中的那样。

基本过程为：

var demos = [(Lazy, print) => {
Lazy([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  .map(i => i * 2)
  .filter(i => i <= 10)
  .take(3)
  .each(i => print(i))
}, (Lazy, print) => {
  // ...
}/*, ...*/]

demos.forEach(demoFn => {
  var el = document.createElement("div")

  var soure // 获取执行代码...
  var result // 获取执行结果...
  var count // 获取回调计数结果...

  el.innerHTML = (
    renderSource(soure) +
    renderResult(result) +
    renderCount(count)
  )

  document.body.appendChild(el)
})

看到这里，已经不耐烦的同学可以直接去 demo 页面上扒代码来看了，相较于我枯燥的描述，代码可能看起来更简单些。

（1）获取执行代码

通过 demoFn.toString() 就可以了，不过需要额外去除函数定义的头尾部分，只在页面展示执行代码。

（2）获取执行结果

通过传入的 print() 来收集执行结果，也不复杂：

var output = []
var print = msg => output.push(msg)

然后将 print 函数传入 demoFn 函数，这样代码执行后输出的结果会被收集到 output 中，然后渲染到页面就可以了。

（3）获取回调计数结果

这个是比较复杂的部分，对应的实现思路就是前面讲的了。不过由于 Lazy.js 中每次方法调用返回的是新的序列对象，要多次生成代理，所以我将生成代理序列对象的代码多带带抽出：

// 计数对象
var count = {map: 0, filter: 0}

function proxySeq(seq) {
  var handler = {
    get(target, name) {
      // 特别处理 `map` 和 `filter`
      if (name === "map" || name === "filter") {
        // 返回一个可以实现计数的函数
        return fn => {
          // 这个 fn 是返回的函数被调用时传入的回调函数，把这个回调
          // 函数包装一下再传给原始序列对象的 map 或 filter 方法，
          // 从而实现调用计数
          var _fn = (v, i) => {
            count[name]++ // 计数
            return fn(v, i) // 调用回调函数
          }
          // 仍旧返回一个新的代理对象
          return proxySeq(target[name](_fn))
        }
      } else {
        return target[name]
      }
    }
  }
  return new Proxy(seq, handler)
}

通过 proxySeq() 来实现一个 FakeLazy：

var _lazy = list => proxySeq(Lazy(list))

和前面的 print 函数一起作为参数来调用 demoFn 函数从而执行代码：

demoFn(_lazy, print)

执行过程中可以收集执行结果和回调函数执行次数，这是借助一个个代理对象来“劫持” map、filter 实现的。

渲染的过程的就是字符串拼接了，不再赘述。

代码胜过万语千言，感兴趣的同学可以去读一下 demo 页面的源码。

最后感叹一下，Lazy.js 的实现还是蛮有意思的，之后我会结合 simply-lazy 分享下惰性求值的实现原理。对了，demo 页面使用的其实是 simply-lazy，而非 Lazy.js。

其实无论是 simply-lazy 还是这里 demo 页面的实现，都有一些不足，例如 demo 页面中其实没有处理 take()，这样后续如果再调用 map 或 filter，就无法计数。不过这些相对于我要介绍的东西而言，不是那么重要，咱们且得鱼忘筌吧。^_^

最后的最后，感谢阅读！