Skip to content

惰性函数(Lazy Function)是一种常用的 JavaScript 技巧,通常用来优化性能。它的核心思想是:函数在第一次执行时会进行初始化操作,之后会将自身重写为实现更高效的版本,后续调用直接执行新的实现逻辑。 惰性函数+闭包可以大幅减少不必要的分支判断,提升性能,常用于兼容性处理、初始化等场景。

闭包(Closure)在惰性函数中的作用是保存初始化时的上下文环境,使得后续调用可以直接使用已经初始化好的内容。

下面是一个常见的例子,以事件绑定为例

js
// 惰性函数:事件绑定
function addEvent(element, type, handler) {
  if (element.addEventListener) {
    addEvent = function(element, type, handler) {
      element.addEventListener(type, handler, false);
    };
  } else if (element.attachEvent) {
    addEvent = function(element, type, handler) {
      element.attachEvent('on' + type, handler);
    };
  } else {
    addEvent = function(element, type, handler) {
      element['on' + type] = handler;
    };
  }
  addEvent(element, type, handler); // 第一次调用仍然执行
}

// 用法
var btn = document.getElementById('myBtn');
addEvent(btn, 'click', function() {
  alert('按钮被点击了!');
});

第一次调用 addEvent 时,会检测浏览器的事件绑定方式,并将 addEvent 重写为适合当前环境的实现。 由于闭包的作用,下次再调用 addEvent 时,直接用最合适的方式绑定事件,无需再次判断。

获取元素样式的兼容实现:

js
function getStyle(elem, prop) {
  if (window.getComputedStyle) {
    getStyle = function(elem, prop) {
      return window.getComputedStyle(elem, null)[prop];
    };
  } else {
    getStyle = function(elem, prop) {
      return elem.currentStyle[prop];
    };
  }
  return getStyle(elem, prop);
}