一、什么是惰性函数

函数体内有一些分支判断，在第一次调用函数时，找到符合条件的分支，修改此函数，之后再调用时不需要再去走分支判断的逻辑了，以此来提升性能。

二、浏览器绑定事件函数兼容写法

      function addEvent(type, element, fun) {
        if (element.addEventListener) {
          element.addEventListener(type, fun, false)
        } else if (element.attachEvent) {
          element.attachEvent('on' + type, fun)
        } else {
          element['on' + type] = fun
        }
      }

这种写法，每次在调用函数时，都会走到if语句中，可以改写成惰性函数：

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

验证执行次数：

    <div id="demo" style="background: red; width: 100px; height: 100px"></div>
    <script>
      var time = 0
      var time1 = 0

      function addEvent(type, element, fun) {
        if (element.addEventListener) {
          time += 1
          element.addEventListener(type, fun, false)
        } else if (element.attachEvent) {
          element.attachEvent('on' + type, fun)
        } else {
          element['on' + type] = fun
        }
      }

      // function addEvent(type, element, fun) {
      //   if (element.addEventListener) {
      //     time1 += 1
      //     addEvent = function (type, element, fun) {
      //       element.addEventListener(type, fun, false)
      //     }
      //   } else if (element.attachEvent) {
      //     addEvent = function (type, element, fun) {
      //       element.attachEvent('on' + type, fun)
      //     }
      //   } else {
      //     addEvent = function (type, element, fun) {
      //       element['on' + type] = fun
      //     }
      //   }
      //   return addEvent(type, element, fun)
      // }

      var div = document.getElementById('demo')
      addEvent('click', div, function () {
        console.log(0)
      })
      addEvent('click', div, function () {
        console.log(1)
      })
      addEvent('click', div, function () {
        console.log(2)
      })

      console.log(time, time1) // 3 0
    </script>

如果采用惰性函数写法，则打印0 1，可见使用惰性函数思维后，多次执行addEvent函数时，性能将会得到提升