惰性函数——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 对应的方法。

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

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