惰性函数(Lazy Function)是一种函数,其函数体中的代码仅在第一次被调用时执行一次,后续调用直接返回第一次执行的结果。
惰性函数的关键在于利用闭包保存第一次执行的结果,避免重复执行函数体代码。
一个典型的惰性函数实现如下:function lazyFunc() {
let result;
function innerFunc() {
if (!result) {
result = /* 某个耗时计算 */;
}
return result;
}
return innerFunc;
}
const func = lazyFunc();
console.log(func()); // 第一次调用,执行内部函数,计算result
console.log(func()); // 直接返回result
上例中,lazyFunc返回一个闭包innerFunc,内部利用result保存第一次执行的结果。后续调用直接返回result,避免重复执行函数体代码。
惰性函数有几个典型用途:
1. 避免重复执行耗时计算。如上例中,result被计算一次后复用,避免重复计算。2. 创建私有变量。通过闭包,innerFunc对外隐藏了result变量。
3. 延迟加载。可以在innerFunc中实现加载逻辑,第一次调用时加载,后续调用直接使用。
4. 节省内存。通过闭包在内部缓存结果,避免重复创建对象导致内存占用过高。
除此之外,Vue和React等框架也大量使用了惰性函数,例如:
- 计算属性:基于它的依赖缓存结果,避免重复计算。- 事件处理函数:在更新过程中,如果事件监听器没有变化,则不会重复绑定事件,节省性能。
- Render函数:如果上一次的渲染结果没有变化,则直接复用之前的结果,不会触发重复渲染。
所以,掌握惰性函数的概念和实现,有助于更深入理解框架的内部原理。网友回复