javascript如何实现惰性函数_它有什么优点-js教程-PHP中文网

javascript如何实现惰性函数_它有什么优点

紅蓮之龍

发布： 2025-12-19 21:49:02

原创

392人浏览过

惰性函数是在首次调用时完成初始化并重写自身、后续调用直接执行优化逻辑的函数；它通过首次判断环境后替换函数引用，避免重复检测开销，适用于高频调用且判断逻辑较重的场景。

javascript如何实现惰性函数_它有什么优点

惰性函数（Lazy Function）是指在**首次调用时才完成初始化或重写自身**的函数，后续调用直接走优化后的逻辑。它不是“延迟执行”，而是“首次执行时自我改造”，从而避免重复判断或初始化开销。

怎么实现惰性函数

核心思路：函数第一次运行时，检测环境或条件，然后用一个更高效的新函数覆盖自己（通过重新赋值函数名或闭包变量）。

利用函数可被重新赋值的特性（如挂载在对象上或使用 let/const 声明的变量）
首次调用中判断一次，比如检测浏览器是否支持某个 API、是否已加载某模块、是否需要 polyfill
判断完成后，把函数体替换成精简版，之后每次调用都不再做判断

常见写法示例（兼容性检测场景）：

let addEvent = function(element, type, handler) {
  // 首次调用：检测并重写自身
  if (window.addEventListener) {
    addEvent = function(element, type, handler) {
      element.addEventListener(type, handler, false);
    };
  } else if (window.attachEvent) {
    addEvent = function(element, type, handler) {
      element.attachEvent('on' + type, handler);
    };
  } else {
    addEvent = function(element, type, handler) {
      element['on' + type] = handler;
    };
  }
  // 立即执行新函数（保证首次调用也生效）
  return addEvent(element, type, handler);
};

登录后复制

更现代的写法（用闭包 + 自执行，避免污染全局）：

立即学习“Java免费学习笔记（深入）”；

AI发型设计

虚拟发型试穿工具和发型模拟器

247

查看详情

const addEvent = (function() {
  if (window.addEventListener) {
    return function(element, type, handler) {
      element.addEventListener(type, handler, false);
    };
  } else if (window.attachEvent) {
    return function(element, type, handler) {
      element.attachEvent('on' + type, handler);
    };
  } else {
    return function(element, type, handler) {
      element['on' + type] = handler;
    };
  }
})();

登录后复制