緩存函數(shù)起到什么/多大的作用？

看到Vue源碼中有一段這樣的cached函數(shù)

/**
 * Create a cached version of a pure function.
 */
function cached (fn) {
  var cache = Object.create(null);
  return (function cachedFn (str) {
    var hit = cache[str];
    return hit || (cache[str] = fn(str))
  })
}

/**
 * Capitalize a string.
 */
var capitalize = cached(function (str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
});

...

capitalize(camelizedId)

請問cached函數(shù)在這里起到什么樣的緩存作用？意義大么？請大佬指教一下！

回答

編輯回答

怣人

函數(shù)式的思想，這里用到了高階函數(shù)(hof) 和柯理化，以及 js 的閉包。

cached 函數(shù)是一個標(biāo)準(zhǔn)的 hof，接收一個函數(shù)，返回一個函數(shù)。不過它還做了一個小小的優(yōu)化，就是利用閉包，在當(dāng)前的函數(shù)作用域定義了一個空對象，返回的函數(shù)由于函數(shù)作用域鏈的存在，是可以訪問這個 cache 對象的，另外參數(shù) fn 同理可訪問。

柯理化體現(xiàn)在，如果這個函數(shù)是

function cached(fn, str) {
  return fn(str);
}
function upper(str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}
cached(upper, camelizedId)

這樣的，其實(shí)是一樣可以解決問題的。只不過我每次調(diào)用的時候，都要傳入兩個參數(shù)，fn 和 str。柯理化把參數(shù)變成每次只傳一個，第一個參數(shù)可以被閉包緩存，然后你以后每次調(diào)用默認(rèn)就有了第一個參數(shù)。比如這里返回了一個新的函數(shù) capitalize，你每次只需要傳入 str 就可以了，函數(shù)調(diào)用的時候比較簡潔。另外，類似形式的都可以使用，比如你有一個把末尾字符小寫的函數(shù) (str) => str.slice(0, str.length - 2) + str.charAt(str.length - 1).toLowerCase()，當(dāng)然這種情況很少。。。這個處理也是很麻煩的。所以如果你把這個小寫函數(shù)做同樣的 cached 處理，會得到一個新的函數(shù)。

其實(shí)作者最想用的還是 cache 對象，因為你會發(fā)現(xiàn)上面我的操作，完全是做無用功，傳入一個函數(shù)，一個
str，執(zhí)行 fn(str)，感覺多此一舉，但其實(shí)多了一個作用域可以緩存。作用是把處理過的 str 緩存到對象里，以后再傳入同樣的，就直接從對象里取，不用再調(diào)用 fn 了。

說意義的話，就是細(xì)節(jié)的優(yōu)化吧，看起來處理的更優(yōu)雅。性能提升的話，如果是大量的使用這個函數(shù)，直接取緩存的意義重大。如果調(diào)用不多，多執(zhí)行幾次，現(xiàn)在 js 的性能還是沒啥問題的。

安利fp-code

2017年8月17日 08:45