创建一个纯函数的缓存版本
主要用途:优化性能——对于之前运算过一次的内容,利用闭包原理,缓存起来,避免重复调用,造成性能的浪费
/** * 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)) }) }
这一段的源码很短,但是在源码中使用了19处!这就显得这个函数很重要了
fn
:(函数类型)
用于执行需要缓存的方法
str
:字符串类型
传入函数fn中的参数
类型为:函数类型
首先通过Object.create
创建一个干净的空对象出来
然后直接返回一个函数(cachedFn
)
函数内首先定义变量,通过传入的参数str去访问创建出来的cache
对象
fn
函数,并把函数返回值赋值给cache
对象这样可能比较抽象,我们直接做一个实验,同样直接在浏览器中做
这一次,我们直接在浏览器的源代码中做——debug
function cached(fn) { var cache = Object.create(null) return( function cachedFn(str) { var hit = cache[str]; return hit || (cache[str] = fn(str)); } ) } var capitalize = cached(function(str) { return str.charAt(0).toUpperCase() + str.slice(1); }) console.log(capitalize("abc"),"第一次访问") console.log(capitalize("abc"),"第二次访问")
直接打一个断点,看看会发生什么
执行第一次
在第一次运行时,发现cache是一个空的object,然后直接进入了立即执行函数cacheFn
中
这里立即执行函数的作用就是
创建新的作用域,隔离变量——于将var使用变为let
效果一致
str值为abc
,也就是传入参数fn中的参数
下一步执行,当然就是执行fn函数了
我们可以看到这里的fn函数就是对应capitalize
中的function,将str的参数传进来
执行的结果就是Abc
右边执行完成后,赋值给左侧的cache[str]
这里的代码可以翻译成,或许更好理解
cache[str] = "Abc"
也就是说,这里相当于通过方括号属性访问器,创建了一个不存在的属性abc
,对应的值是fn返回的Abc
在右侧监视的cache
也明显的多出了一个属性abc
执行第二次
此时我们看见,cache此时是具有属性abc
的,因此hit的值不再是undefined
第二次时,很明显的我们可以看见执行过程,没有再次调用fn函数,也就是说没有调用capitalize
中的函数,而是直接获取的缓存。
从而也就做到了对性能的优化。
为什么cache是有效的,每次调用函数的时候不都创建了新的吗?
这里其实使用的是闭包的特性。
在调用cached函数时,会在当前函数创建一个cache对象
也就是说,其实cache对象是属于当前示例中的capitalize
这个我们可以直接在属性中看出来
我们重新debug一次,这一次关注capitalize
中的值
第一次执行时
第二次执行时
在运行完cache[str] = fn(str)
后,发现的确这里的值增加了一个
因此,我们可以得出结论。
小结:
在每一次调用cached
时,由于闭包函数的特性,使得cached中的变量值不会被清空,而且这个值是在对应的处理方法中的。
因为cache对象是在内部创建的,所以每次调用cached都将是不同的object
各自拥有独立的缓存空间,而不是全局共用一个