惰性函数——JS高级

Posted 2020-06-13

原文地址：http://www.cnblogs.com/galenyip/p/4613430.html

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

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

先看下他最常用的实现

 1 // 旧方法
 2 
 3 function createXHR() {
 4     var xhr;
 5     try{
 6         xhr = new XMLHttpRequest();
 7     }catch(e) {
 8         handleErr(e);
 9 
10         try {
11             xhr = new ActiveXObject("Msxml2.XMLHTTP");
12         }catch(e) {
13             try{
14                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
15             }catch(e) {
16                 xhr = null;
17             }
18         }
19     }
20 
21     return xhr ;
22 }
23 
24 function handleErr(error) {
25     // 这一步在实战中很重要，因为catch会延长作用域链，所以是在全局作用域声明的e
26     // 这里我们把它赋给局部变量，则查找更快
27     var err = error;
28 
29     // do sth.
30 }

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

 

那

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

 

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

 

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

不多说，直接上代码

 1 // 惰性函数
 2 // 第二次才生效
 3 // 作用：优化对于被频繁使用的函数
 4 function createXHR() {
 5     var xhr;
 6     if(typeof XMLHttpRequest != ‘undefined‘) {
 7         xhr = new XMLHttpRequest();
 8         createXHR = function() {
 9             return new XMLHttpRequest();
10         }
11     }else {
12         try {
13             xhr = new ActiveXObject("Msxml2.XMLHTTP");
14             createXHR = function() {
15                 return new ActiveXObject("Msxml2.XMLHTTP");
16             }
17         }catch(e) {
18             try {
19                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
20                 createXHR = function() {
21                     return new ActiveXObject("Microsoft.XMLHTTP");
22                 }
23             }catch(e) {
24                 createXHR = function () {
25                     return null;
26                 }
27             }
28         }
29     }
30     return xhr 
31 }

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

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

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