LazyFunction

惰性函数

普通函数

1. timeStamp 污染全局
2. 执行第一次之后，timeStamp 已经有值，但后续每次执行都会进入 if 语句

   // 例：
   var timeStamp = null;
   function getTimeStamp() {
     if (timeStamp) {
       return timeStamp
     }
     timeStamp = new Date().getTime();
     return timeStamp
   };

   惰性函数

3. 执行一遍外层函数，拿到需要的值后，在函数内部重写自身，返回需要的值
4. 后续调用 不需要每次都执行原函数 重读的代码段

   // 例：
   var getTimeStamp = function () {
     let timeStamp = new Date().getTime();
     getTimeStamp = function () {
       return timeStamp;
     }
     return getTimeStamp();
   }

   实际应用

普通函数添加事件

每次执行都要对浏览器进行判断。 可以在第一次判断后就保留判断结果，再次执行时就不需要判断了。

var addEvent = (function () {
  if (window.addEventListener) {
    return function (el, type, fn, capture) {
      el.addEventListener(type, fn, capture);
    }
  } else if (window.attachEvent) {
    return function (el, type, fn) {
      el.attachEvent('on' + type, function () {
        fn.call(el)
      })
    }
  } else {
    return function (el, type, fn) {
      el['on' + type] = fn;
    }
  }
})();

惰性函数添加事件

第一次判断之后，在函数体内部重写自身，后续执行的是重写后的函数，不需要再进行无用的判断

var addEvent = function (el, type, fn, capture) {
  if (el.addEventlistener) {
    addEvent = function (el, type, fn, capture) {
      el.addEventlistener(type, fn, capture)
    }
  } else if (el.attachEvent) {
    addEvent = function (el, type, fn) {
      el.attachEvent('on' + type, function () {
        fn.call(el)
      })
    }
  } else {
    addEvent = function (el, type, fn) {
      el['on' + type] = fn
    }
  }
  return addEvent(el, type, fn, capture);
}