JavaScript 惰性函数

一、什么是惰性函数

惰性函数表示函数执行的分支只在函数首次调用执行，首次调用的过程中，该函数会被覆盖为另一个按照指定方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支，而是直接调用覆盖后的函数。

二、惰性函数的实现

以一个 foo 函数为例，该函数每次调用时返回首次调用的 Date 对象，实现如下：

1、普通方式

let t;
function foo() {
  if (t) return t;
  t = new Date()
  return t;
}

这种方式污染了全局变量，而且每次调用 foo 时都需要进行一次判断。

2、闭包的方式

let foo = (function () {
  let t;
  return function () {
    if (t) return t;
    t = new Date();
    return t;
  }
})();

这种方式也是每次调用时都要进行一次判断。

3、构造函数的方式

function foo() {
  if (foo.t) return foo.t;
  foo.t = new Date();
  return foo.t;
}

这种方式还是每次调用时都要进行一次判断。

4、惰性函数的方式

let foo = function () {
  let t = new Date();
  foo = function () {
    return t;
  };
  return foo();
};

惰性函数解决了每次调用都要进行判断的问题，实现原理是首次调用时重写函数。

三、惰性函数的应用

举个例子，在 DOM 事件添加中，为了兼容现代浏览器和 IE 浏览器，需要对浏览器环境进行一次判断：

function addEvent(type, el, fn) {
  if (window.addEventListener) {
    el.addEventListener(type, fn, false);
  }
  else if (window.attachEvent) {
    el.attachEvent('on' + type, fn);
  }
}

利用惰性函数，可以在后续调用时省去判断步骤：

function addEvent(type, el, fn) {
  if (window.addEventListener) {
    addEvent = function (type, el, fn) {
      el.addEventListener(type, fn, false);
    }
  }
  else if (window.attachEvent) {
    addEvent = function (type, el, fn) {
      el.attachEvent('on' + type, fn);
    }
  }
  addEvent(type, el, fn); // 首次调用时需要单独执行一次函数
}