如何在 JavaScript 中惰性载入函数

惰性载入函数是优化 JavaScript 性能的重要技术，它指的是函数只在第一次调用时定义，之后的每次调用都用这个已定义好的实现，从而避免了不必要的代码重复执行、条件判断或者对象创建过程。主要手段包括条件判断、闭包和对象属性赋值等。首先，我们可以在函数内部重写该函数，这样在第一次函数执行时，会被替换为一个新的函数，新函数将直接执行所需操作，省略了初始的条件判断等步骤；这是惰性载入最直接的方式。

接下来，我们将深入探讨具体的实现方法与它们的应用场景，来确保你能够在日常开发中合理地运用惰性载入技术。

一、条件判断法

使用条件判断对函数进行包装是最简单直观的实现方式，我们定义一个函数，在函数体内部，根据条件来重新定义这个函数的实现。

function foo(){
    if(/* 检查某些条件 */){
        foo = function(){
            // 新的函数实现
        };
    } else {
        foo = function(){
            // 另一种形式的函数实现
        };
    }
    return foo();
}

这种方式的缺点是每次函数调用都要进行一次判断，直到第一次条件满足后函数被重定义。

二、使用闭包实现惰性载入

闭包可以用来保存函数的状态，利用这个特性，我们可以在闭包中保存初始的函数实现。当函数第一次执行后，就可以用新的函数来替换这个初始实现。

var foo = (function(){
    var originalFoo = function(){
        // 初始实现
    };
    return function(){
        foo = function(){
            // 新的函数实现
        };
        return foo();
    };
})();

闭包的好处是只在第一次调用时才进行函数重定义，消除了不必要的条件检查，但这种方式相对于条件判断法更为复杂，增加了一层不必要的闭包调用。

三、对象属性赋值

我们还可以利用对象的属性来存储函数，当这个属性第一次被调用时，我们就重写这个属性所对应的函数。

var obj = {
    foo: function(){
        obj.foo = function(){
            // 新的函数实现
        };
        return obj.foo();
    }
};

这种方式将函数作为对象的一个属性，第一次调用函数时，会改写这个属性，之后的调用就会直接使用新的函数实现。

四、应用实例

接下来，我们来看一些实际的应用实例，分析它们是如何利用惰性载入技术来解决具体问题的。

A. 事件处理函数惰性载入

在跨浏览器的事件处理中，由于不同的浏览器实现事件模型的方式不一样，因此我们在绑定事件时常常需要根据浏览器的类型进行判断。

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

在这段代码中，addEvent方法根据是否支持addEventListener或attachEvent来绑定事件，只在第一次尝试绑定事件时去判断，之后都直接调用正确的API来绑定事件。

B. 创建XHR对象

创建XHR（XMLHttpRequest）对象也是一个很适合使用惰性载入的场景。在不同的浏览器环境中，创建XHR对象的方式可能不一样，但我们可以通过惰性载入只做一次判断来解决这个问题。

function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
        createXHR = function(){
            return new XMLHttpRequest();
        };
    } else if(typeof ActiveXObject != "undefined"){
        createXHR = function(){
            return new ActiveXObject("Microsoft.XMLHTTP");
        };
    }
    return createXHR();
}