秒懂高阶编程之惰性函数

前言

高阶编程听起来很高大上，但只要你弄懂了，一切就豁然开朗。
我将会用接下来的几篇文章讲一下高阶编程的一些技巧。
今天要讲解的是高阶编程技巧的惰性函数，又称（惰性载入函数）。

首先什么是惰性(载入)函数？

惰性载入表示函数执行的分支只会在函数第一次调用的时候执行，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了。

如果上面简述的定义让你难理解的话，我们看一个例子来理解一下。开发中我们总是会手写一个函数用于判断当前环境是哪种环境然后再执行相应环境下应该执行的代码（逻辑）。

下面是一个区分浏览器的兼容性来注册事件的一个函数，由于各浏览之间的差异，不得不用方法检测当前环境的能力，用以实现每种注册事件的方式。

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;
      }
    }

从整体上看，上面的方法已经实现了区分了每种环境，但是实际上在同一环境中，分支其实走一次，做一回判断就可以了，不需要每次都要做一回判断。这样就引入了我们的惰性载入函数。惰性载入表示函数执行的分支仅会发生一次。实现惰性载入的方式有两种。第一种是在函数被调用的时候再处理函数。在第一次调用的过程中，该函数会被赋给为另一个按照合适方式执行的函数。这样任何对原函数的调用都不用在经过执行的分支了。方式一实现

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;
        }
      }
      addEvent(type, element, fun);
    }

第二种实现惰性载入的范式是在声明时就指定适当的函数，这样第一次调用是就不会损失性能了，而在代码首次加载时会损失一点性能。
方式二实现

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

参考

《JavaScript高级程序设计（第3版）》——第22章高阶技巧中惰性载入函数。

通过以上的方式希望你能对惰性(载入)函数有一定的理解。

听说分享关注的人都年薪百万了

这里是前端扫地僧，和你一起分享前端的那些事。