zoukankan      html  css  js  c++  java
  • JavaScript闭包基本概念

    闭包的概念

    维基百科中是这么解释闭包的:

    • 计算机科学中,闭包(也称为词法闭包或函数闭包)是指一个函数或函数的引用,与一个引用环境绑定在一起。这个函数环境是一个存储该函数每个非局部变量(也叫自由变量)的表。

    • 闭包,不同意一般函数,它允许一个函数在立即词法作用域外调用时,认可访问非本地变量。

    闭包的例子

    使用闭包

    function outer() {
        var localVal = 30;
        return function() {
            return localVal;
        }
    }
    
    var func = outer();
    func();
    

    outer函数调用结束后,func函数仍能访问外层的局部变量,即为闭包。

    应用闭包,在前端编程中添加点击事件:

    !function() {
        var localData = "localData here";
        document.addEventListener('click', 
            function(){
                console.log(localData);
            });
    }();
    

    循环闭包错误

    document.body.innerHTML = "<div id=div1>aaa</div>"
        + "<div id=div2>bbb</div><div id=div3>ccc</div>";
    for(var i=1; i<4; i++) {
        document.getElementById('div' + i).
            addEventListener('click', function() {
                alert(i);   // all are 4!
            }
    }
    

    因为i在发生点击事件时才会访问,以上例子中,全部点击事件均会提示4。

    解决办法:

    document.body.innerHTML = "<div id=div1>aaa</div>"
        + "<div id=div2>bbb</div><div id=div3>ccc</div>";
    for(var i=1; i<4; i++) {
        !function(i) {
            document.getElementById('div' + i).
                addEventListener('click', function() {
                    alert(i);   // all are 4!
                }
        }(i)
    }
    
  • 相关阅读:
    Redis最佳实践:7个维度+43条使用规范,带你彻底玩转Redis | 附实践清单
    laravel生命周期
    日志写入
    商城表设计
    10个你不一定知道的PHP内置函数
    PHP函数详解:call_user_func()使用方法
    Dingo与JWT的使用
    商城-会员与用户的数据表设计
    MVVM模式
    vue面试题
  • 原文地址:https://www.cnblogs.com/haoxi/p/7074102.html
Copyright © 2011-2022 走看看