别再反复写判断了！巧用惰性函数优化你的代码

你是否经常遇到需要重复进行相同判断的情况？每次都写同样的判断语句，不仅繁琐，还可能影响代码性能。今天就给大家介绍一个巧妙的方法——使用惰性函数，可以让代码更加简洁高效。

一、什么是惰性函数？

在JavaScript开发里，我们经常会碰到这样的场景：有一个函数，它在不同的环境条件下，需要执行不同的逻辑。比如下面这个简单的事件绑定函数：

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

在这个addEvent函数里，每次调用时都要判断window对象是否存在addEventListener方法。实际上，在同一个运行环境下，这个判断结果是固定的，完全没必要每次都判断一遍。

那有没有更好的办法呢？这就引出了惰性函数。我们来看改进后的代码：

function addEvent(el, type, handler) { if (window.addEventListener) { addEvent = function(el, type, handler) { el.addEventListener(type, handler, false); } } else { addEvent = function(el, type, handler) { el.attachEvent('on' + type, handler); } } return addEvent(el, type, handler); // 调用新的函数 }

从这段代码可以看出，惰性函数的特点是：在第一次执行时，会根据特定的条件来改变自身的行为。后续再调用这个函数时，就直接执行更新后的逻辑，避免了重复判断。

二、惰性函数的实现方式

（一）在函数内部重写自身

这是一种比较常见的惰性函数实现方式，就像上面addEvent函数的改进版本一样。我们再来看一个简单的示例：

function foo() { console.log('初始化...'); foo = function() { console.log('后续逻辑'); } }

在这个foo函数中，第一次调用时会执行初始化的打印语句，同时把foo函数重新定义为只打印“后续逻辑”的函数。之后再调用foo函数，就直接执行新定义的逻辑了。

这种方式在大多数场景下都能很好地发挥作用，能够有效地避免重复判断和操作。

（二）用函数表达式赋值

除了在函数内部重写自身，还可以通过函数表达式赋值的方式来实现惰性函数。代码示例如下：

const foo = (function() { if (someCondition) { return function() { console.log('A'); } } else { return function() { console.log('B'); } } })();

在这段代码里，使用了立即执行函数表达式（IIFE）。在这个立即执行的函数内部，根据someCondition条件来返回不同的函数。最终，foo会被赋值为返回的函数。

这种方式适用于模块开发或者需要立即执行并确定函数行为的场景，它利用闭包的特性，对函数的初始化逻辑进行了封装。

三、惰性函数的应用场景

（一）兼容性判断

在前端开发中，处理浏览器兼容性问题是绕不开的工作。很多时候，我们需要根据不同浏览器的特性来编写不同的代码。就像前面提到的事件绑定，不同浏览器的事件绑定方式不一样。使用惰性函数，就可以在第一次调用相关函数时，根据浏览器的具体情况确定绑定方式，后续调用直接执行相应逻辑，避免了重复判断，提高了代码的执行效率。

（二）性能优化

惰性函数的原理是只执行一次判断或初始化操作，这和单例模式有些相似。在很多场景下，如果存在重复操作，尤其是重复的初始化操作，就可以考虑使用惰性函数来优化。比如在Canvas渲染引擎中，一些初始化设置只需要执行一次；加载外部依赖时，避免重复加载；判断用户登录状态，不需要每次都重新判断等。通过使用惰性函数，可以有效减少不必要的操作，提升程序的性能。