JS学习理解之闭包和高阶函数

摘要：闭包的形成与变量的作用域以及变量的生存周期密切相关。现在我们把变量用闭包封闭起来，便能解决请求丢失的问题二高阶函数高阶函数是指至少满足下列条件之一的函数。回调函数在异步请求的应用中，回调函数的使用非常频繁。

对于 JavaScript 程序员来说,闭包(closure)是一个难懂又必须征服的概念。闭包的形成与
变量的作用域以及变量的生存周期密切相关。下面我们先简单了解这两个知识点。

变量的作用域,就是指变量的有效范围。我们最常谈到的是在函数中声明的变量作用域。

当在函数中声明一个变量的时候,如果该变量前面没有带上关键字 var,这个变量就会成为 全局变量,这当然是一种容易造成命名冲突的做法。
另外一种情况是用 var 关键字在函数中声明变量,这时候的变量即是局部变量,只有在该函 数内部才能访问到这个变量,在函数外面是访问不到的。代码如下:

var func = function(){ var a = 1;
    alert ( a ); // 输出: 1 
};
func();
alert ( a ); // 输出:Uncaught ReferenceError: a is not defined

在 JavaScript 中,函数可以用来创造函数作用域。此时的函数像一层半透明的玻璃,在函数 里面可以看到外面的变量,而在函数外面则无法看到函数里面的变量。这是因为当在函数中搜索 一个变量的时候,如果该函数内并没有声明这个变量,那么此次搜索的过程会随着代码执行环境 创建的作用域链往外层逐层搜索,一直搜索到全局对象为止。变量的搜索是从内到外而非从外到 内的。

下面这段包含了嵌套函数的代码,也许能帮助我们加深对变量搜索过程的理解:

var a = 1;
var func1 = function(){ 
    var b = 2;
    var func2 = function(){ 
        var c = 3;
        alert ( b ); // 输出:2
        alert ( a ); // 输出:1
    }
    func2(); 
    alert ( c );// 输出:Uncaught ReferenceError: c is not defined
}; 
func1(); 

除了变量的作用域之外,另外一个跟闭包有关的概念是变量的生存周期。

对于全局变量来说,全局变量的生存周期当然是永久的,除非我们主动销毁这个全局变量。

而对于在函数内用 var 关键字声明的局部变量来说,当退出函数时,这些局部变量即失去了 它们的价值,它们都会随着函数调用的结束而被销毁:

var func = function(){
var a = 1; // 退出函数后局部变量 a 将被销毁 alert ( a );
}; func();

现在来看看下面这段代码:

var func = function(){ 
    var a = 1;
    return function(){ 
        a++;
        alert ( a );
    } 
};
var f = func();
f(); // 输出:2
f(); // 输出:3
f(); // 输出:4
f(); // 输出:5

闭包可以帮助把一些不需要暴露在全局的变量封装成“私有变量”。假设有一个计算乘积的
简单函数:

var mult = function(){ var a = 1;
for ( var a = a
}
return a; };
i = 0, l = arguments.length; i < l; i++ ){ * arguments[i];

mult 函数接受一些 number 类型的参数,并返回这些参数的乘积。现在我们觉得对于那些相同 的参数来说,每次都进行计算是一种浪费,我们可以加入缓存机制来提高这个函数的性能:

var cache = {};
var mult = function(){
    var args = Array.prototype.join.call( arguments, "," ); 
    if ( cache[ args ] ){
        return cache[ args ]; 
    }
    var a = 1;
    for ( var i = 0, l = arguments.length; i < l; i++ ){
        a = a * arguments[i]; 
    }
    return cache[ args ] = a; 
};
alert ( mult( 1,2,3 ) ); // 输出:6
alert ( mult( 1,2,3 ) ); // 输出:6

我们看到 cache 这个变量仅仅在 mult 函数中被使用,与其让 cache 变量跟 mult 函数一起平行 地暴露在全局作用域下,不如把它封闭在 mult 函数内部,这样可以减少页面中的全局变量,以 4 避免这个变量在其他地方被不小心修改而引发错误。代码如下:

var mult = (function(){
    var cache = {}; 
    return function(){
        var args = Array.prototype.join.call( arguments, "," ); 
        if ( args in cache ){
            return cache[ args ]; 
        }
        var a = 1;
        for ( var i = 0, l = arguments.length; i < l; i++ ){
            a = a * arguments[i]; 
        }
        return cache[ args ] = a; 
    }
})();

提炼函数是代码重构中的一种常见技巧。如果在一个大函数中有一些代码块能够独立出来, 我们常常把这些代码块封装在独立的小函数里面。独立出来的小函数有助于代码复用,如果这些 小函数有一个良好的命名,它们本身也起到了注释的作用。如果这些小函数不需要在程序的其他 9 地方使用,最好是把它们用闭包封闭起来。代码如下:

var cache = {};
var mult = (function(){
    var cache = {};
    var calculate = function(){ // 封闭 calculate 函数
        var a = 1;
        for ( var i = 0, l = arguments.length; i < l; i++ ){
            a = a * arguments[i];
        }
        return a;
    };
    return function(){
        var args = Array.prototype.join.call( arguments, "," );
        if ( args in cache ){
            return cache[ args ];
        }
        return cache[ args ] = calculate.apply( null, arguments );
    }
})();

img 对象经常用于进行数据上报，如下所示：

var report = function( src ){
    var img = new Image();
    img.src = src;
};
report( "http://xxx.com/getUserInfo" );

但是通过查询后台的记录我们得知，因为一些低版本浏览器的实现存在 bug，在这些浏览器下使用 report 函数进行数据上报会丢失 30%左右的数据，也就是说， report 函数并不是每一次都成功发起了 HTTP 请求。丢失数据的原因是 img 是 report 函数中的局部变量，当 report 函数的调用结束后， img 局部变量随即被销毁，而此时或许还没来得及发出 HTTP 请求，所以此次请求就会丢失掉。

现在我们把 img 变量用闭包封闭起来，便能解决请求丢失的问题：

var report = (function(){
    var imgs = [];
    return function( src ){
        var img = new Image();
        imgs.push( img );
        img.src = src;
    }
})();

高阶函数是指至少满足下列条件之一的函数。

函数可以作为参数被传递；

函数可以作为返回值输出。

JavaScript 语言中的函数显然满足高阶函数的条件，在实际开发中，无论是将函数当作参数
传递，还是让函数的执行结果返回另外一个函数，这两种情形都有很多应用场景，下面就列举一
些高阶函数的应用场景。

把函数当作参数传递，这代表我们可以抽离出一部分容易变化的业务逻辑，把这部分业务逻
辑放在函数参数中，这样一来可以分离业务代码中变化与不变的部分。其中一个重要应用场景就
是常见的回调函数。

在 ajax 异步请求的应用中，回调函数的使用非常频繁。当我们想在 ajax 请求返回之后做一
些事情，但又并不知道请求返回的确切时间时，最常见的方案就是把 callback 函数当作参数传入
发起 ajax 请求的方法中，待请求完成之后执行 callback 函数：

var getUserInfo = function( userId, callback ){
    $.ajax( "http://xxx.com/getUserInfo?" + userId, function( data ){
        if ( typeof callback === "function" ){
            callback( data );
        }
    });
}
getUserInfo( 13157, function( data ){
    alert ( data.userName );
});

回调函数的应用不仅只在异步请求中，当一个函数不适合执行一些请求时，我们也可以把这些请求封装成一个函数，并把它作为参数传递给另外一个函数，“委托”给另外一个函数来执行。

Array.prototype.sort 接受一个函数当作参数，这个函数里面封装了数组元素的排序规则。从Array.prototype.sort 的使用可以看到，我们的目的是对数组进行排序，这是不变的部分；而使用 什 么 规 则 去 排 序 ， 则 是 可 变 的 部 分 。 把 可 变 的 部 分 封 装 在 函 数 参 数 里 ， 动 态 传 入Array.prototype.sort，使 Array.prototype.sort 方法成为了一个非常灵活的方法，代码如下：

//从小到大排列
[ 1, 4, 3 ].sort( function( a, b ){
    return a - b;
});
// 输出: [ 1, 3, 4 ]

//从大到小排列
[ 1, 4, 3 ].sort( function( a, b ){
    return b - a;
});
// 输出: [ 4, 3, 1 ]

相比把函数当作参数传递，函数当作返回值输出的应用场景也许更多，也更能体现函数式编程的巧妙。让函数继续返回一个可执行的函数，意味着运算过程是可延续的。

我们来看看这个例子，判断一个数据是否是数组，在以往的实现中，可以基于鸭子类型的概念来判断，比如判断这个数据有没有 length 属性，有没有 sort 方法或者 slice 方法等。但更好的方式是用 Object.prototype.toString 来计算。 Object.prototype.toString.call( obj )返回一个字 符 串 ， 比 如 Object.prototype.toString.call( [1,2,3] ) 总 是 返 回 "[object Array]" ， 而Object.prototype.toString.call( “str”)总是返回"[object String]"。所以我们可以编写一系列的isType 函数。代码如下：

var isString = function( obj ){
    return Object.prototype.toString.call( obj ) === "[object String]";
};
var isArray = function( obj ){
    return Object.prototype.toString.call( obj ) === "[object Array]";
};
var isNumber = function( obj ){
    return Object.prototype.toString.call( obj ) === "[object Number]";
};

我们发现，这些函数的大部分实现都是相同的，不同的只是 Object.prototype.toString.call( obj )返回的字符串。为了避免多余的代码，我们尝试把这些字符串作为参数提前值入 isType函数。代码如下：

var isType = function( type ){
    return function( obj ){
        return Object.prototype.toString.call( obj ) === "[object "+ type +"]";
    }
};
var isString = isType( "String" );
var isArray = isType( "Array" );
var isNumber = isType( "Number" );
console.log( isArray( [ 1, 2, 3 ] ) ); // 输出： true

我们还可以用循环语句，来批量注册这些 isType 函数：

var Type = {};
for ( var i = 0, type; type = [ "String", "Array", "Number" ][ i++ ]; ){
    (function( type ){
        Type[ "is" + type ] = function( obj ){
            return Object.prototype.toString.call( obj ) === "[object "+ type +"]";
        }
    })( type )
};
Type.isArray( [] ); // 输出： true
Type.isString( "str" ); // 输出： true

下面是一个单例模式的例子，在第三部分设计模式的学习中，我们将进行更深入的讲解，这
里暂且只了解其代码实现：

var getSingle = function ( fn ) {
    var ret;
    return function () {
        return ret || ( ret = fn.apply( this, arguments ) );
    };
};

这个高阶函数的例子，既把函数当作参数传递，又让函数执行后返回了另外一个函数。我们可以看看 getSingle 函数的效果：

var getScript = getSingle(function(){
`return document.createElement( "script" );
});
var script1 = getScript();
var script2 = getScript();
alert ( script1 === script2 ); // 输出： true

注：内容摘取《Javascript设计模式与开发实践》