一、闭包

关于 JavaScript 顺序员来讲,闭包(closure)是一个难明又必需制服的观点。闭包的构成与
变量的作用域以及变量的生计周期密切相关。下面我们先简朴相识这两个知识点。

1.1 变量的作用域

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

当在函数中声明一个变量的时刻,假如该变量前面没有带上关键字 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(); 

1.2 变量的生计周期

除了变量的作用域以外,别的一个跟闭包有关的观点是变量的生计周期。

关于全局变量来讲,全局变量的生计周期当然是永远的,除非我们主动烧毁这个全局变量。

而关于在函数内用 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

1.3闭包的作用

1.3.1 封装变量

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

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 );
    }
})();

1.3.2 连续局部变量的寿命

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 语言中的函数明显满足高阶函数的前提，在现实开辟中，无论是将函数看成参数
通报，照样让函数的实行结果返回别的一个函数，这两种情况都有许多运用场景，下面就枚举一
些高阶函数的运用场景。

2.1 函数作为参数通报

把函数看成参数通报，这代表我们可以抽离出一部份轻易变化的营业逻辑，把这部份营业逻
辑放在函数参数中，如许一来可以星散营业代码中变化与稳定的部份。个中一个主要运用场景就
是罕见的回调函数。

1. 回调函数

在 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 );
});

回调函数的运用不仅只在异步要求中，当一个函数不适合实行一些要求时，我们也可以把这些要求封装成一个函数，并把它作为参数通报给别的一个函数，“托付”给别的一个函数来实行。

2. Array.prototype.sort

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 ]

2.2 函数作为返回值输出

比拟把函数看成参数通报，函数看成返回值输出的运用场景也许更多，也更能表现函数式编程的奇妙。让函数继承返回一个可实行的函数，意味着运算历程是可连续的。

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

2. getSingle

下面是一个单例形式的例子，在第三部份设想形式的进修中，我们将举行更深切的解说，这
里临时只相识其代码完成：

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设想形式与开辟实践》