摘要：本文不深入分析惰性計(jì)算的內(nèi)部原理后面打算多帶帶做一次分享，而是介紹下我是如何實(shí)現(xiàn)上面的回調(diào)函數(shù)執(zhí)行計(jì)數(shù)。問(wèn)題明確下需求或者說(shuō)要解決的問(wèn)題，針對(duì)如下的代碼能夠統(tǒng)計(jì)代碼執(zhí)行過(guò)程中傳入的回調(diào)函數(shù)和的實(shí)際執(zhí)行次數(shù)。

最近在做一個(gè)簡(jiǎn)化版的 Lazy.js：simply-lazy，目的是深入分析 Lazy.js 中惰性求值的實(shí)現(xiàn)，同時(shí)由于簡(jiǎn)化了實(shí)現(xiàn)過(guò)程，便于在分享（計(jì)劃近期分享）時(shí)作為 demo 展示。

惰性求值的一個(gè)重要特性是延遲了計(jì)算過(guò)程，從而能夠提升性能，例如：

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))

注：為了書寫方便，回調(diào)函數(shù)使用了 ES 的“=>”來(lái)定義。

這里對(duì)原始數(shù)據(jù)執(zhí)行 map、filter 后只取前 3 個(gè)結(jié)果值，Lazy.js 的實(shí)現(xiàn)策略是 map、filter 中的回調(diào)函數(shù)也盡可能少地被調(diào)用，可以看下統(tǒng)計(jì)出的回調(diào)函數(shù)的調(diào)用次數(shù)：

demo 地址：http://www.luobotang.cn/simpl...
注意：需要瀏覽器環(huán)境支持 ES6 特性，建議使用較新版本的 Chrome 打開。

從上面的 demo 中可以看到，第三種情況下，雖然仍舊要執(zhí)行與前面相同的 map、filter 的過(guò)程，但是由于最終只需要返回前 3 個(gè)結(jié)果值，此時(shí) map、filter 的回調(diào)函數(shù)執(zhí)行次數(shù)是減少了的。

本文不深入分析 Lazy.js 惰性計(jì)算的內(nèi)部原理（后面打算多帶帶做一次分享），而是介紹下我是如何實(shí)現(xiàn)上面的回調(diào)函數(shù)執(zhí)行計(jì)數(shù)。

明確下需求或者說(shuō)要解決的問(wèn)題，針對(duì)如下的代碼：

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))

能夠統(tǒng)計(jì)代碼執(zhí)行過(guò)程中 map、filter 傳入的回調(diào)函數(shù)（i => i * 2 和 i => i <= 10）的實(shí)際執(zhí)行次數(shù)。

實(shí)現(xiàn)這個(gè)需求，可以采用粗暴的模式，例如：

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)

不過(guò)這樣寫的話我的 demo 頁(yè)面展示的代碼不久太丑了嗎，計(jì)數(shù)的過(guò)程其實(shí)是額外的工作，寫到 demo 代碼里面也影響其他人閱讀不是嗎。

所以，我想實(shí)現(xiàn)不修改 demo 代碼的計(jì)數(shù)。

其實(shí)在考慮需求的時(shí)候，就已經(jīng)琢磨過(guò)要實(shí)現(xiàn)的話得采用哪些技術(shù)了。比較自然的想法，就是用“假”的 Lazy 函數(shù)來(lái)替換原有的 Lazy 函數(shù)，這樣后續(xù)的調(diào)用過(guò)程就可以進(jìn)行任意的 hack 的了。例如：

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

貌似是可以的，也應(yīng)該是可以的，因?yàn)楹罄m(xù)的調(diào)用實(shí)際上是被“劫持”了，我可以把計(jì)數(shù)的代碼添加到回調(diào)函數(shù)被調(diào)用的時(shí)候執(zhí)行，例如：

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

對(duì)于 filter 也要執(zhí)行類似的處理，而 take、each 則直接調(diào)用原有的 seq 對(duì)象上的方法就好了。

另外，由于每次調(diào)用后都會(huì)產(chǎn)生一個(gè)新的序列對(duì)象（sequence），為了能夠正常鏈接后續(xù)的調(diào)用，還要繼續(xù)返回一個(gè)新的劫持的序列對(duì)象。有點(diǎn)麻煩，不過(guò)也能實(shí)現(xiàn)。

可以看到，這種“劫持”對(duì)象的過(guò)程，比較繁瑣，不僅要劫持到關(guān)心的方法，還得保證對(duì)象其他的方法也能正常調(diào)用。而在 ES6/ES2015 中，有更好的技術(shù)可以采用：Proxy - MDN。

Proxy 這樣使用：

var proxy = new Proxy(target, handler);

這樣可以得到一個(gè)代理對(duì)象 proxy，與前面的“劫持”對(duì)象類似，在程序中直接使用 proxy 來(lái)替代原始的 target 對(duì)象。不過(guò) Proxy 對(duì)象的強(qiáng)大之處在于，對(duì)于該代理對(duì)象的各種“請(qǐng)求”，會(huì)調(diào)用相應(yīng)的 handler 中傳入的回調(diào)函數(shù)。這樣就不需要代理對(duì)象實(shí)現(xiàn)原始對(duì)象的所有功能，只需要處理那些關(guān)心的情況。

對(duì)于前面的情況，使用 Proxy 可以大致這樣處理：

function FakeLazy(list) {
  var seq = Lazy(list)
  return Proxy(seq, {
    get(target, name) {
      if (name === "map" || name === "filter") {
        // 執(zhí)行處理...
      } else {
        return target[name] // 不需要處理的情況直接返回原始對(duì)象的屬性或方法
      }
    }
  })
}

返回的代理對(duì)象在被訪問(wèn)任何屬性或方法時(shí)，都會(huì)被攔截，首先調(diào)用 handler 中的 get() 方法，這樣除了要特殊處理的 map 和 filter，其他的直接返回原有屬性或方法。

思路有了，然后就是具體的實(shí)現(xiàn)工作了。

首先看下頁(yè)面處理邏輯，每個(gè) demo 代碼塊我都包裝在一個(gè)函數(shù)中的，然后將執(zhí)行代碼、執(zhí)行結(jié)果、回調(diào)計(jì)數(shù)結(jié)果分別輸出到頁(yè)面上，也就是前面圖中的那樣。

基本過(guò)程為：

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 // 獲取執(zhí)行代碼...
  var result // 獲取執(zhí)行結(jié)果...
  var count // 獲取回調(diào)計(jì)數(shù)結(jié)果...

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

  document.body.appendChild(el)
})

看到這里，已經(jīng)不耐煩的同學(xué)可以直接去 demo 頁(yè)面上扒代碼來(lái)看了，相較于我枯燥的描述，代碼可能看起來(lái)更簡(jiǎn)單些。

（1）獲取執(zhí)行代碼

通過(guò) demoFn.toString() 就可以了，不過(guò)需要額外去除函數(shù)定義的頭尾部分，只在頁(yè)面展示執(zhí)行代碼。

（2）獲取執(zhí)行結(jié)果

通過(guò)傳入的 print() 來(lái)收集執(zhí)行結(jié)果，也不復(fù)雜：

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

然后將 print 函數(shù)傳入 demoFn 函數(shù)，這樣代碼執(zhí)行后輸出的結(jié)果會(huì)被收集到 output 中，然后渲染到頁(yè)面就可以了。

（3）獲取回調(diào)計(jì)數(shù)結(jié)果

這個(gè)是比較復(fù)雜的部分，對(duì)應(yīng)的實(shí)現(xiàn)思路就是前面講的了。不過(guò)由于 Lazy.js 中每次方法調(diào)用返回的是新的序列對(duì)象，要多次生成代理，所以我將生成代理序列對(duì)象的代碼多帶帶抽出：

// 計(jì)數(shù)對(duì)象
var count = {map: 0, filter: 0}

function proxySeq(seq) {
  var handler = {
    get(target, name) {
      // 特別處理 `map` 和 `filter`
      if (name === "map" || name === "filter") {
        // 返回一個(gè)可以實(shí)現(xiàn)計(jì)數(shù)的函數(shù)
        return fn => {
          // 這個(gè) fn 是返回的函數(shù)被調(diào)用時(shí)傳入的回調(diào)函數(shù)，把這個(gè)回調(diào)
          // 函數(shù)包裝一下再傳給原始序列對(duì)象的 map 或 filter 方法，
          // 從而實(shí)現(xiàn)調(diào)用計(jì)數(shù)
          var _fn = (v, i) => {
            count[name]++ // 計(jì)數(shù)
            return fn(v, i) // 調(diào)用回調(diào)函數(shù)
          }
          // 仍舊返回一個(gè)新的代理對(duì)象
          return proxySeq(target[name](_fn))
        }
      } else {
        return target[name]
      }
    }
  }
  return new Proxy(seq, handler)
}

通過(guò) proxySeq() 來(lái)實(shí)現(xiàn)一個(gè) FakeLazy：

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

和前面的 print 函數(shù)一起作為參數(shù)來(lái)調(diào)用 demoFn 函數(shù)從而執(zhí)行代碼：

demoFn(_lazy, print)

執(zhí)行過(guò)程中可以收集執(zhí)行結(jié)果和回調(diào)函數(shù)執(zhí)行次數(shù)，這是借助一個(gè)個(gè)代理對(duì)象來(lái)“劫持” map、filter 實(shí)現(xiàn)的。

渲染的過(guò)程的就是字符串拼接了，不再贅述。

代碼勝過(guò)萬(wàn)語(yǔ)千言，感興趣的同學(xué)可以去讀一下 demo 頁(yè)面的源碼。

最后感嘆一下，Lazy.js 的實(shí)現(xiàn)還是蠻有意思的，之后我會(huì)結(jié)合 simply-lazy 分享下惰性求值的實(shí)現(xiàn)原理。對(duì)了，demo 頁(yè)面使用的其實(shí)是 simply-lazy，而非 Lazy.js。

其實(shí)無(wú)論是 simply-lazy 還是這里 demo 頁(yè)面的實(shí)現(xiàn)，都有一些不足，例如 demo 頁(yè)面中其實(shí)沒(méi)有處理 take()，這樣后續(xù)如果再調(diào)用 map 或 filter，就無(wú)法計(jì)數(shù)。不過(guò)這些相對(duì)于我要介紹的東西而言，不是那么重要，咱們且得魚忘筌吧。^_^

最后的最后，感謝閱讀！