闭包与作用域再次深究

Posted 2022-11-27 pomelott

最近看到一个有意思的函数

        function test (arr) 
            var temp = []
            for (var i =0;  i<arr.length; i++) 
                (function() 
                    var j = i;
                    temp[i] = function () 
                        return j
                    
                )()
                
            
            return temp
        　　

那么以下的结果会打印出什么呢？

var arr = [1,2,3,4,5]
var arrFn = test(arr)
console.log(arrFn[0])　　

结果是：0；

那么继续test函数换成以下两种又会是什么结果呢？

        function test2 (arr) 
            var temp = []
            for (var i =0;  i<arr.length; i++) 
                
                temp[i] = function () 
                    return i
                
                
            
            return temp
        

        function test3 (arr) 
            var temp = []
            for (var i =0;  i<arr.length; i++) 
                (function() 
                    temp[i] = function () 
                        return i
                    
                )()
                
            
            return temp
        

test2是网上比较常见的，结果是我们在读取i的时候，i已经全部变为5；test3和test只有两行代码不同，但是结果却完全不一样。

之前曾经理解是因为我们调用的时候for循环已经执行完，所以会拿到i为5。但是其实这只是表象，最核心的其实只有一句话：

闭包通过引用而不是值（非引用）来获取他们外部的变量

因为是引用类型，所以在for执行完之后，i变为了5，引用类型也就继而变为5.

在test中添加了一行可以验证的代码就是：

var j = i;

通过在局部作用域声明非引用类型，将单次循环是的引用类型保存下来，那么就能获取我们想要的结果了。

还有其他方法，通过自执行函数传递参数，将引用类型变为非引用类型都是一个原理：

        function test4 (arr) 
            var temp = []
            for (var i =0;  i<arr.length; i++) 
                (function(j) 
                    temp[i] = function () 
                        return j;
                    
                )(i)
                
            
            return temp
        　　

其次就是在IIFE来创建局部作用域的时候，需要注意不能再作用域外部使用break与continue，这样的写法是不合法的。