惰性载入函数是“只做一次，之后全走捷径”，首次调用时执行环境检测并重写自身为精简版本，后续调用直接运行最优路径，避免重复判断。

惰性载入函数不是“等会儿再做”，而是“只做一次，之后全走捷径”。它把环境检测、兼容性判断、资源初始化这类高成本操作，推迟到函数第一次被调用时才执行，并立即重写自身为一个精简、专用的版本。后续调用完全跳过所有分支和检测逻辑，直接运行最优路径。

为什么环境嗅探适合用惰性载入

浏览器能力检测（如 addEventListener 是否存在）、运行时特征判断（如是否支持 getComputedStyle）、模块可用性检查（如 fetch 或 XMLHttpRequest）——这些结果在单页生命周期内是稳定不变的。反复判断同一条件，纯属冗余计算。

• 普通写法每次调用都走 if/else，哪怕页面里调用 100 次，也重复判断 100 次
• 预加载嗅探（IIFE 方式）在脚本加载时就执行，哪怕函数压根没被调用，也白耗资源
• 惰性载入只在真正需要时才检测，且仅一次，检测完立刻切换成“免检通道”

两种主流实现方式及写法要点

核心在于：函数首次执行时，根据环境决定新函数体，并将自身重新赋值；然后立即调用新函数。关键细节决定是否健壮：

• 函数重写方式：直接给函数名重新赋值，注意必须在重写后立刻调用，否则会报“Maximum call stack size exceeded”（递归爆栈）
• 闭包封装方式：用 IIFE 返回一个内部已缓存判断结果的函数，避免污染全局函数引用，更适合模块化或多人协作场景
• 判断顺序建议从最现代、最常用的能力开始（如优先查 addEventListener），提高首调命中率
• 务必覆盖兜底分支（如 IE8 及更早），否则在不支持的环境中会静默失败

典型实战示例：跨浏览器事件绑定

以下是一个生产可用的惰性载入 addEvent 函数：

function addEvent(el, type, handler) {
  if (el.addEventListener) {
    addEvent = function(el, type, handler) {
      el.addEventListener(type, handler, false);
    };
  } else if (el.attachEvent) {
    addEvent = function(el, type, handler) {
      el.attachEvent('on' + type, handler);
    };
  } else {
    addEvent = function(el, type, handler) {
      if (el['on' + type]) {
        el['on' + type] = handler;
      } else {
        el.setAttribute('on' + type, handler.toString());
      }
    };
  }
  return addEvent(el, type, handler);
}

第一次调用后，addEvent 就变成一个纯执行函数，不再含任何 if 判断。

进阶提醒：该注意什么

惰性载入虽高效，但容易埋下隐患：

• 函数重写后，原函数引用失效——若其他变量曾保存旧版函数（如 const oldAdd = addEvent），后续调用仍走原始逻辑，导致行为不一致
• 调试时查看函数体，看到的是重写后的版本，原始判断逻辑已不可见，需靠注释或文档补全上下文
• 单元测试需覆盖所有分支路径，因为每个分支都会生成不同版本的函数，不能只测“默认路径”
• 在模块打包（如 Webpack）环境下，若函数被 tree-shaking 误删，或被压缩工具混淆重命名，可能导致重写失败