闭包⭕函数

作用：延伸变量的作用范围。

 <script>
        // 闭包（closure）指有权访问另一个函数作用域中变量的函数
        //我们fn外面的作用域可以访问fn内部的局部变量
        //闭包的主要作用：延伸了变量的作用范围
        function fn() {
            var num = 10;
            return function() {
                console.log(num); //10
            };
        }
        var f = fn();
        f();
        console.log(f);
        // 打印f输出下面的结果
        //ƒ () {
        // console.log(num); //10
        // }
</script>

以上代码的执行过程如下：

fn()；调用函数进入fn()函数的内部
定义一个变量var num = 10;
return返回一个函数可以打印输出num的值
定义一个变量var f
把函数fn()赋值给f
此时f的本质就是一个函数，通过 console.log(f);打印输出的结果可以得出
f()调用这个函数就可以打印输出num=10

整个函数f()可以访问到函数fn()内部的局部变量的过程就是闭包。

闭包应用

    <script>
        //通过闭包的形式，让console.log(i)输出0 1 2 3 4
        for (var i = 0; i < 5; i++) {
            function fn(i) {
                setTimeout(Time(), 1000)
            }
            fn();

            function Time() {
                console.log(i);
            }
        }
    </script>

<body>
    <button id="btn1">按钮25</button>
    <button id="btn2">按钮40</button>
    <button id="btn3">按钮60</button>
    <p>字体大小变化</p>
    <script>
        // 闭包点击按钮改变页面上的文字大小
        var btn1 = document.querySelector("#btn1");
        var btn2 = document.querySelector("#btn2");
        var btn3 = document.querySelector("#btn3");

        function setFont(fontSize) {
            return function() {
                document.body.style.fontSize = fontSize + "px";
            };
        }
        btn1.onclick = setFont(25);
        btn2.onclick = setFont(40);
        btn3.onclick = setFont(60);
    </script>
</body>

<body>
    <button>赞(1)</button>
    <button>赞(1)</button>
    <button>赞(1)</button>
    <button>赞(1)</button>
    <script>
        //闭包缓存数据
        function getValue() {
            var value = 2;
            return function() {
                //每一次点击的时候,都应该改变当前点击按钮的value值
                this.innerHTML = "赞(" + (value++) + ")";
            }
        }
        //获取所有的按钮
        var btnObjs = document.getElementsByTagName("button");
        //循环遍历每个按钮,注册点击事件
        for (var i = 0; i < btnObjs.length; i++) {
            //注册事件
            btnObjs[i].onclick = getValue();
        }
    </script>
</body>