• 闭包


    闭包就是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外。

    自由变量是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。如:
    function wrapper() {
    var freeVar = 42; function inner() { return 2 * freeVar; } return inner; }
    其中freeVar就是自由变量。
    自由变量在闭包生成之前,并不是函数的一部分。在函数被调用时,闭包才会形成,函数将这个自由变量纳入自己的作用域,自由变量从此与定义它的容器无关。

    来看一个困惑例子:

      <button>第1条记录</button>
        <button>第2条记录</button>
        <button>第3条记录</button>
        <button>第4条记录</button>
        <button>第5条记录</button>
        <button>第6条记录</button>
    <script type="text/javascript">  
        var buttonst_obj = document.getElementsByTagName("button"); 
        for (var i = 0, len = buttonst_obj.length; i < len; i++) {
            buttonst_obj[i].onclick = function() {   
                alert(i);   
            };
        }
    </script>
    每个Button弹出的都是6,因为没有形成有效的闭包,因为闭包是有延迟求值特性的,所以在函数得到执行时,i==6。

    如果将它改成这样,i 做为外层函数的参数而被内层函数闭包,结果就会是我们想要的:

    var buttonst_obj = document.getElementsByTagName("button");
    for (var i = 0, len = buttonst_obj.length; i < len; i++) {
        buttonst_obj[i].onclick = clickEvent(i);
    }
    function clickEvent(i){
        return function () {
            console.log(i);
        }
    }
    因为这个clickEvent(i) 高阶函数,它将 i 作为自由变量(注意:i 并不是内函数的参数,也不是内函数的一部分)传递,在 click 时闭包已经形成并被传递。
    其中,高阶函数满足:要么接受一个或多个函数作为输入;要么输出一个函数
  • 相关阅读:
    2018前端工程师成长路线图
    ECMAScript正则表达式6个最新特性
    Fundebug前端JavaScript插件更新至1.2.0
    写给前端工程师的10条实用原则
    代码面试需要知道的8种数据结构(附面试题及答案链接)
    20个Chrome DevTools调试技巧
    Web应用架构入门之11个基本要素
    配置Tree Shaking来减少JavaScript的打包体积
    SQL Server全文搜索(转载)
    ASP.NET Core多语言 (转载)
  • 原文地址:https://www.cnblogs.com/leyoyo/p/4193295.html
Copyright © 2020-2023  润新知