JS中的惰性函数基本介绍

JS中的惰性函数(Lazy Function)其实是一种非常巧妙的性能优化设计模式,也就是利用js的动态重写函数 的思想,用第一次调用时微乎其微的代价,换取了后续所有调用的极致性能,它的核心思想非常直白:让函数在第一次执行时"记住"环境特性或计算结果,并在后续调用中直接走捷径,不再做无意义的重复判断或计算。

你可以把它想象成下班回家认路:第一天到一个新小区,你需要停下来辨认方向、确认门牌号(这是第一次执行的"脏活累活");但如果你住了十年,每天回家还在每个路口重新认路就太荒谬了。惰性函数就是让你"第一次辛苦认路,以后闭着眼走直线"。

核心原理:函数自我重写

在 JavaScript 中,函数是一等公民,这意味着函数可以在运行时被重新赋值和修改。惰性函数正是利用了这一特性,在函数内部将自己重写为一个优化后的"精简版"函数。

在 JS 中,实现惰性函数主要有以下两种经典写法:

1. 函数内直接重写(延迟执行版)

这种写法在第一次调用时才进行环境检测和函数重写。

javascript 复制代码
function createXHR() {
  // 第一次进入这里,做繁重的环境检测
  if (window.XMLHttpRequest) {
    // 如果是标准浏览器,将 createXHR 重写为直接返回新对象的函数
    createXHR = function () {
      return new XMLHttpRequest();
    };
  } else {
    // 如果是古董 IE,重写为兼容版本
    createXHR = function () {
      return new ActiveXObject("Microsoft.XMLHTTP");
    };
  }
  // 重写完后,手动调用一次新函数,保证第一次调用也能拿到正确的结果
  return createXHR();
}

运行流程: 第一次调用 createXHR() 时,它进入原函数体做判断,把全局的 createXHR 指针指向新函数,然后返回结果。以后再调用 createXHR(),它就已经是那个精简版的新函数了,直接返回结果,完全跳过了 if/else 判断。

2. 闭包 + 立即执行(立即执行版)

这种写法在代码加载阶段(函数被赋值时)就立刻执行判断,并返回最终的函数形态。

javascript 复制代码
const addEvent = (function () {
  // 这个外层自执行函数只跑一遍
  if (document.addEventListener) {
    // 标准浏览器,直接返回优化后的函数
    return function (el, type, handler) {
      el.addEventListener(type, handler, false);
    };
  } else if (document.attachEvent) {
    // 古董 IE,返回兼容版函数
    return function (el, type, handler) {
      el.attachEvent("on" + type, handler);
    };
  }
})();

运行流程: addEvent 在定义时,外层函数就立即执行并根据环境返回了最终形态。后续无论调用多少次 addEvent,它都是最终那个没有判断逻辑的函数。

经典应用场景

  1. 浏览器兼容性检测 :比如检测 addEventListenerlocalStorageIntersectionObserver 等 API 是否存在。因为浏览器的运行环境在页面打开那一刻就已经确定了,不会中途改变,完全没必要每次调用都去扫描一遍。
  2. 单次初始化逻辑 :比如生成一次性的复杂正则表达式、拉取远程配置后把 init 函数替换成空函数(防止重复初始化)。
  3. 复杂计算或资源加载缓存:对于一些第一次计算非常耗时的操作,可以在第一次算出结果后缓存起来,后续直接返回缓存值。

概念辨析:惰性函数 vs 惰性求值

在学习过程中,你可能会遇到另一个相似的概念叫**"惰性求值(Lazy Evaluation)"**。这两者虽然都带"惰性",但解决的问题完全不同:

  • 惰性函数(Lazy Function) :侧重于一次判断,终身受益。通过重写函数来消除重复的条件判断,提升高频调用时的执行效率。
  • 惰性求值(Lazy Evaluation) :侧重于按需计算,节省资源。通常利用 ES6 的生成器来实现,推迟昂贵计算或处理无限数据流,只有当真正需要某个值时才去计算它(例如处理超大数组的过滤和映射)。

掌握惰性函数,能让你在处理跨浏览器兼容或高频工具函数时,写出性能更极致、逻辑更优雅的代码。

相关推荐
KaMeidebaby2 分钟前
卡梅德生物技术快报|Western Blot 实验应用:肺肠轴机制研究全流程技术解析
前端·数据库·人工智能·算法·百度
MageGojo12 分钟前
做节日活动页时,如何用 API 快速生成对联内容
javascript·python·节日·对联生成
达达爱吃肉17 分钟前
claude 接入deepseek 运行报错
java·服务器·前端
jingling55524 分钟前
Flutter | Dio网络请求实战
android·开发语言·前端·flutter
向上的车轮27 分钟前
Next.js 入门指南:从零到一构建全栈应用
开发语言·javascript·ecmascript
freeinlife'30 分钟前
精准秒表计时器实现---基于js
开发语言·前端·javascript
王文?问40 分钟前
ESP32-S3 实战教程:本地语音识别控制 Web 塔防游戏,从固件到前端完整跑通
前端·游戏·语音识别
Hoshizola1 小时前
uniapp与蓝牙设备连接详细步骤
前端·uni-app
优雅格子衫1 小时前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
Dxy12393102161 小时前
HTML如何写鼠标事件
前端·html·计算机外设