JS编程建议——62：在循环体和异步回调中慎重使用闭包

落日映苍穹つ 2021-09-19 11:00 188阅读 0赞

建议62：在循环体和异步回调中慎重使用闭包  
闭包在开发中具有重要的应用价值，由于闭包具有持久性，生成的闭包不会立即被销毁，因此它会持续占用系统资源。如果大量使用闭包，将会造成系统资源紧张，甚至导致内存溢出等错误。另外，闭包在回调函数中会带来负面影响，因此在使用时应该慎重。  
下面的示例利用闭包来存储变量所有变化的值。  
function f( x )\{

var a = [];
    for ( var i = 0; i < x.length; i ++ ){
        var temp = x[i];
        a.push( function(){
            alert( temp + ' ' + x[i] )
        });
    }
    return a;

\}  
function e()\{

var a = f( ["a", "b", "c"] );
    for ( var i = 0; i < a.length; i ++ ){
        a[i]();
    }

\}  
e(); // 调用函数e  
在这个示例中，函数f的功能是：把数组类型的参数中每个元素的值分别封装在闭包结构中，然后把闭包存储在一个数组中，并返回这个数组。但是，在函数e中调用函数f，并向其传递一个数组（\["a", "b", "c"\]），然后遍历函数f返回数组，此时会发现，数组中每个元素的值都是“c undefined”。  
原来闭包中的变量temp并不是固定的，它会随时根据函数运行环境中的变量temp的值变化而更新，这样会导致临时数组元素的值都是字符“c”，而不是“a”、“b”、“c”，同时，由于循环变量i递增之后，最后的值是3， x\[3\]超出了数组的长度，所以结果就是undefined。  
解决闭包存在缺陷问题的方法是：为闭包再包裹一层函数，然后运行该函数，并把外界动态值传递给它，这个函数接收这些值后传递给内部的闭包函数，从而阻断了闭包与最外层函数的实时联系。  
function f( x )\{

\}  
function e()\{

var a = f( ["a", "b", "c"] );
    for ( var i = 0; i < a.length; i ++ ){
        a[i]();
    }

\}  
e();  
同一个闭包通过分别引用能够在当前环境中生成多个闭包。例如：  
function f( x )\{

var temp = x;
    return function( x ){
        temp += x;
        alert( temp );
    }

\}  
var a = f( 50 )  
var b = f( 100 )  
a( 5 ) //55  
b( 10 ) //110