借助 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/simply-lazy/demo.html
注意：需要浏览器环境支持 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，就无法计数。不过这些相对于我要介绍的东西而言，不是那么重要，咱们且得鱼忘筌吧。^_^

最后的最后，感谢阅读！

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