惰性函数——JS高级

我们先来看一下js的异步提交。

XHR我们在原生的时候常常用到，因为常用到，我们更多把封装到了工具库中

先看下他最常用的实现

// 旧方法

function createXHR() {
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch(e) {
        handleErr(e);

        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e) {
            try{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e) {
                xhr = null;
            }
        }
    }

    return xhr ;
}

function handleErr(error) {
    // 这一步在实战中很重要，因为catch会延长作用域链，所以是在全局作用域声明的e
    // 这里我们把它赋给局部变量，则查找更快
    var err = error;

    // do sth.
}

没错吧？这是最常见的createXHR实现方法了。

那

如题，这里要说的 惰性函数 是什么东西呢？

我们先说它的作用： 优化被经常调用到的函数。

这也属于JS高级中的一部分

不多说，直接上代码

// 惰性函数
// 第二次才生效
// 作用：优化对于被频繁使用的函数
function createXHR() {
    var xhr;
    if(typeof XMLHttpRequest != 'undefined') {
        xhr = new XMLHttpRequest();
        createXHR = function() {
            return new XMLHttpRequest();
        }
    }else {
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            createXHR = function() {
                return new ActiveXObject("Msxml2.XMLHTTP");
            }
        }catch(e) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
                createXHR = function() {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }catch(e) {
                createXHR = function () {
                    return null;
                }
            }
        }
    }
    return xhr 
}

代码中，我们让函数在第一次运行之后，则判断除了浏览器的环境，就被重新赋值了。赋值后的函数是直接return 对应的方法。

所以，这个函数，需要第二次调用的时候才真正的被调用。

正是因为它第二次调用函数的时候，没有去走第一次调用那样复杂的判断的路，所以显得“懒惰”。因此我们叫它 惰性函数