zoukankan      html  css  js  c++  java
  • 闭包与作用域再次深究

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

            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,这样的写法是不合法的。

  • 相关阅读:
    atitit.atiOrmStoreService 框架的原理与设计 part1  概述与新特性
    Atitit. atiOrder   Order 订单管理框架的设计
    Atitit.为什么小公司也要做高大上开源项目
    Atitit.atiInputMethod v2词库清理策略工具    q229
    12条黄金法则
    数据库主键设计
    xhtml常见问题
    程序员面试宝典
    采用XHTML和CSS设计可重用可换肤的WEB站点
    XHTML基础问答
  • 原文地址:https://www.cnblogs.com/pomelott/p/11575027.html
Copyright © 2011-2022 走看看