一、是什么

函数缓存，就是将函数运算过的结果进行缓存

本质上就是用空间（缓存存储）换时间（计算过程）

常用于缓存数据计算结果和缓存对象

const add = (a,b) => a+b;
const calc = memoize(add); // 函数缓存
calc(10,20);// 30
calc(10,20);// 30 缓存

缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理

二、如何实现

实现函数缓存主要依靠闭包、柯里化、高阶函数，这里再简单复习下：

闭包

闭包可以理解成，函数 + 函数体内可访问的变量总和

(function() {
    var a = 1;
    function add() {
        const b = 2
        let sum = b + a
        console.log(sum); // 3
    }
    add()
})()

add函数本身，以及其内部可访问的变量，即 a = 1，这两个组合在⼀起就形成了闭包

柯里化

把接受多个参数的函数转换成接受一个单一参数的函数

// 非函数柯里化
var add = function (x,y) {
    return x+y;
}
add(3,4) //7
// 函数柯里化
var add2 = function (x) {
    //**返回函数**
    return function (y) {
        return x+y;
    }
}
add2(3)(4) //7

将一个二元函数拆分成两个一元函数

{
  function add (x) {
    return function (y) {
      return x + y
    }
  }
  const addNum1 = add(1)
  console.log(addNum1); //ƒ (y) { return x + y }
  console.log(add(1)(2) === addNum1(2)); // true
}

{
  const argSum = (args) => {
    return args.reduce((acc, cur) => {
      return acc + cur
    }, 0)
  }
  const foo = (...args1) => {
    const num1 = argSum(args1)
    const fn = (...args2) => {
      const num2 = argSum(args2)
      return foo(num1 + num2)
    }
    fn.toString = () => {
      return num1
    }
    return fn
  }
  /*
  1.args1 = [1,2,3]
  2.num1 = 6
  3.执行下一个函数传入参数[4] 即args2 = [4]
  4.num2 = 4
  5.调用foo自身，传入参数6+4 = 10
  6.fn toString方法  num1 = 6
  7.执行foo,传入步骤六的参数 num1 = 10
  8.执行下一个函数传入参数[5] 即args2 = [5]
  9.num2 = 5
  10.调用foo自身，传入参数10+5 = 15
  11.fn toString方法  num1 = 15
  */
  console.log(Number(foo(1)(2)(3))) // 6
  console.log(Number(foo(1,2,3)(4)(5))) // 15
}
{
  const sumFn = (...args) => {
    return args.reduce((acc, cur) => {
      return acc + cur
    }, 0)
  }
  const currying = function (func) {
    const args = []
    return function result(...rest) {
      if (rest.length === 0) {
        return func.apply(this,[...args])
      } else {
        args.push(...rest)
        return result
      }
    }
  }
  console.log(currying(sumFn)(1)(2)(3,4,5)()); // 15
}

高阶函数

通过接收其他函数作为参数或返回其他函数的函数

function foo(){
  var a = 2;
  function bar() {
    console.log(a);
  }
  return bar;
}
var baz = foo();
baz();//2

函数 foo 如何返回另一个函数 bar，baz 现在持有对 foo 中定义的bar 函数的引用。由于闭包特性，a的值能够得到

下面再看看如何实现函数缓存，实现原理也很简单，把参数和对应的结果数据存在一个对象中，调用时判断参数对应的数据是否存在，存在就返回对应的结果数据，否则就返回计算结果

如下所示

const memoize = function (func, content) {
  let cache = Object.create(null)
  content = content || this
  return (...key) => {
    if (!cache[key]) {
      cache[key] = func.apply(content, key)
    }
    return cache[key]
  }
}

调用方式也很简单

const calc = memoize(add);
const num1 = calc(100,200)
const num2 = calc(100,200) // 缓存得到的结果

过程分析：

  • 在当前函数作用域定义了一个空对象，用于缓存运行结果

  • 运用柯里化返回一个函数，返回的函数由于闭包特性，可以访问到cache

  • 然后判断输入参数是不是在cache的中。如果已经存在，直接返回cache的内容，如果没有存在，使用函数func对输入参数求值，然后把结果存储在cache中

三、应用场景

虽然使用缓存效率是非常高的，但并不是所有场景都适用，因此千万不要极端的将所有函数都添加缓存

以下几种情况下，适合使用缓存：

  • 对于昂贵的函数调用，执行复杂计算的函数

  • 对于具有有限且高度重复输入范围的函数

  • 对于具有重复输入值的递归函数

  • 对于纯函数，即每次使用特定输入调用时返回相同输出的函数

参考文献