函数的惰性载入

这是一个 JS 编程时候常用到的高级技巧，在日常开发中我们会经常用 if 语句判断，将执行引导到正确的代码中，看看下面的 createXHR() 函数：

function createXHR() {
  if (typeof XMLHttpRequest != "undefined") {
    return new XMLHttpRequest();
  } else if (typeof ActiveXObject != "undefined") {
    if (typeof arguments.callee.activeXString != "string") {
      var versions = [
          "MSXML2.XMLHttp.6.0",
          "MSXML2.XMLHttp.3.0",
          "MSXML2.XMLHttp",
        ],
        i,
        len;
      for (i = 0, len = versions.length; i < len; i++) {
        try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        } catch (ex) {
          //跳过
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  } else {
    throw new Error("No XHR object available.");
  }
}

每次调用 createxHR() 的时候，它都要对浏览器所支持的能力仔细检查。首先检查内置的 XER, 然后测试有没有基于 Activcx 的 XHR，最后如果都没有发现的话就地出一个错误。每次调用该函数都是 这样，即使每次调用时分支的结果都不变:如果浏览器支持内登 XHR，那么它就一直支持了，那么这种测试就变得没必要了。即使只有一个 if 语句的代码，也肯定比没有 if 语句的慢，所以如果 if 语句不必每次执行，那么代码可以运行地更快一些。解决方案就是称之为惰性载人的技巧。

可以用下面的方式使用惰性载入重写 createXHR：

function createXHR () {
	if (typeof XMLHttpRequest != 'undefined') {
		createXHR = function () {
			return new XMLHttpRequest();
		};
	} else if (typeof ActiveXObjext != 'undefined') {
		createXHR = function () {
			if (typeof arguments.callee.activeXString != 'string') {
				var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
					i,len;
				for (i = 0; len = versions.length; i < len; i++) {
					try {
						new ActiveXObject(versions[i]);
						arguments.callee.activeXString = versions[i];
						break;
					} catch (e) {
						// skip
					}
				}
			}
			return new ActiveXObject(arguments.callee.activeXString);
		};
	} else {
		createXHR = function () {
			throw new Error('No XHR object available.');
		}
	}
	return createXHR();
}

在这个惰性载入的 createXHR 中，if 语句的每一个分支都会为 createXHR 变量赋值，有覆盖原有的函数。最后一步便是调用新赋的函数。下一次调用 createXHR 的时候，就会直接调用被分配的函数，这样就不用再次执行 if 语句了。

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能，而在代码首次加载时会损失一点点性能而已，以下就是按照这个思路重写的例子：

var createXHR = (function () {
	if (typeof XMLHttpRequest != 'undefined') {
		return function () {
			return new XMLHttpRequest();
		};
	} else if (typeof ActiveXObjext != 'undefined') {
		return function () {
			if (typeof arguments.callee.activeXString != 'string') {
				var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
        var i;
        var len;
				for (i = 0; len = versions.length; i < len; i++;) {
					try {
						new ActiveXObject(versions[i]);
						arguments.callee.activeXString = versions[i];
						break;
					} catch (e) {
						// skip
					}
				}
			}
			return new ActiveXObject(arguments.callee.activeXString);
		};
	} else {
		return function () {
			throw new Error('No XHR object available.');
		}
	}
})();

这个例子使用的自执行函数 IIFE，用以确定应该使用哪一个函数实现。实际的逻辑都一样，不一样的地方就是第一行代码（使用 var 定义函数）新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给 createXHR。

总结

惰性载入函数是种编程优化的思想，只是在执行分支的时候牺牲一点点性能，就可以达到避免重复执行不必要代码的作用，在日常开发中是很常用到的一种高级函数技巧。

函数