面试官：JavaScript中如何实现函数缓存？有哪些应用场景？

你的名字 2022-10-23 01:49 163阅读 0赞

![1e825295897832e4a9b2735f82d56d1e.png][]

## 一、是什么 ##

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

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

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

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 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`中

## 三、应用场景 ##

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

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

*  对于昂贵的函数调用，执行复杂计算的函数
 *  对于具有有限且高度重复输入范围的函数
 *  对于具有重复输入值的递归函数
 *  对于纯函数，即每次使用特定输入调用时返回相同输出的函数

## 参考文献 ##

*  https://zhuanlan.zhihu.com/p/112505577

\--The End--

系列正在更新：25/33

*  [面试官：说说你对正则表达式的理解？应用场景？][Link 1]  
    
 *  [面试官：说说你对DOM的理解，常见的操作有哪些？][DOM]
 *  [面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？][BOM_BOM]
 *  [面试官：JavaScript中本地存储的方式有哪些？区别及应用场景？][JavaScript]
 *  [面试官：举例说明你对尾递归的理解，有哪些应用场景][Link 2]
 *  [面试官：说说 JavaScript 中内存泄漏的几种情况？][JavaScript 1]
 *  [面试官：说说你对函数式编程的理解？优缺点？][Link 3]
    
    篇副有限，扫下方二维码查看往期

![1dd4434b93a92bbc0f7f25685e34e41f.png][]

[1e825295897832e4a9b2735f82d56d1e.png]: /images/20221022/6c07ab2f45a54e04a924cd01408d9853.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c81acb67410c458664ea37ee0598e0e85783afdc771e92772c2e3f619d465002d8897bc7&idx=2&mid=2247486028&scene=21&sn=7efbff142f8966159b2fb1cdfee22f34#wechat_redirect
[DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8d0cb6741c63fa8c57b9b563b52ed2bf784c07980cbd832eb847cfd3f20b3f6d93f9735&idx=1&mid=2247486086&scene=21&sn=2a4320d54a65d71a5d5aab42dcde4e52#wechat_redirect
[BOM_BOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8cacb6741dce70f20ce120ee69fef2a8310513a62af0b84dc9f838f8f16a0d4cd0ae7ce&idx=2&mid=2247486108&scene=21&sn=d8feb34e4273ccca56e79853030e7036#wechat_redirect
[JavaScript]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c92dcb67403b70aa91ea4c905b9132bbfe23878e956b9e45e25c395c4453d51effb7cc51&idx=2&mid=2247486331&scene=21&sn=dd7f3d2184ba37997986e19dd1765027#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8fccb6741ea44a2bdec53066645ee306ebda5e8888acece65811a2578aa94cf5ff1f7e6&idx=1&mid=2247486122&scene=21&sn=9c6642610382251b87ba1cc6d128ed72#wechat_redirect
[JavaScript 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c894cb674182fc3696d53ed6e78f18fb64c21b8c8fc885c8f15c7a804abdb6d248faa1e1&idx=2&mid=2247486146&scene=21&sn=4acf4a04b4930e1c57636ab83f7ebaae#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c9facb6740ecf20a77cb83643ceef19aa93b901b54661a146508e163fccde666c2602419&idx=1&mid=2247486380&scene=21&sn=309ded50f9a3081cbb1554fe6823fa92#wechat_redirect
[1dd4434b93a92bbc0f7f25685e34e41f.png]: /images/20221022/45ce006e32854093b48e4414ace25501.png