写代码啦
闭包的几个应用场景
回复数(0) 浏览数(20)
{{topic.upvote_count || 0}} 编辑 回复

闭包

闭包可以让函数外部可以访问到函数内部的数据;

一个持有外部环境变量的函数就是闭包

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        body {
            font-size: 12px;
        }

        h1 {
            font-size: 1.5rem;
        }

        h2 {
            font-size: 1.2rem;
        }
    </style>
</head>

<body>
    <p>哈哈哈哈哈哈</p>
    <h1>hhhhhhhhh</h1>
    <h2>qqqqqqqqq</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>
    <script>
        //认识闭包
        function fn() {
             var a = 200;

             function f1() {
                 var a = 100;

                 function f2() {
                     var a = 50;
                     return a;
                 }
                 return f2();
             }
             return f1();
         }
         var res = fn();
         console.log(res);

        //-------------------------闭包应用之一,setTimeout带参-------------------------------

         var test = function(name) {
             var name = '刘文博'

             function getName() {

                 return console.log(name)
             }

             return getName()
         }
         setTimeout(test, 1000)

        //-------------------------闭包应用之闭包应用场景之回调-------------------------------

        function changeSize(size) {
            return function() {
                document.body.style.fontSize = size + 'px';
            };
        }

        var size12 = changeSize(12);
        var size14 = changeSize(14);
        var size16 = changeSize(16);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-14').onclick = size14;
        document.getElementById('size-16').onclick = size16;
        //我们定义行为,然后把它关联到某个用户事件上(点击或者按键)。
        //我们的代码通常会作为一个回调(事件触发时调用的函数)绑定到事件上

        //-------------------------闭包应用场景之封装变量-------------------------------

        //用闭包定义能访问私有函数和私有变量的公有函数。
        var counter = (function() {
            var privateCounter = 0; //私有变量
            function change(val) {
                privateCounter += val;
            }
            return {
                increment: function() { //三个闭包共享一个词法环境
                    change(1);
                },
                decrement: function() {
                    change(-1);
                },
                value: function() {
                    return privateCounter;
                }
            };
        })();

        console.log(counter.value()); //0
        counter.increment();
        counter.increment(); //2
        //共享的环境创建在一个匿名函数体内,立即执行。
        //环境中有一个局部变量一个局部函数,通过匿名函数返回的对象的三个公共函数访问。
    </script>
</body>

</html>
{{topic.upvote_count || 0}}

闭包

闭包可以让函数外部可以访问到函数内部的数据;

一个持有外部环境变量的函数就是闭包

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        body {
            font-size: 12px;
        }

        h1 {
            font-size: 1.5rem;
        }

        h2 {
            font-size: 1.2rem;
        }
    </style>
</head>

<body>
    <p>哈哈哈哈哈哈</p>
    <h1>hhhhhhhhh</h1>
    <h2>qqqqqqqqq</h2>

    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>
    <script>
        //认识闭包
        function fn() {
             var a = 200;

             function f1() {
                 var a = 100;

                 function f2() {
                     var a = 50;
                     return a;
                 }
                 return f2();
             }
             return f1();
         }
         var res = fn();
         console.log(res);

        //-------------------------闭包应用之一,setTimeout带参-------------------------------

         var test = function(name) {
             var name = '刘文博'

             function getName() {

                 return console.log(name)
             }

             return getName()
         }
         setTimeout(test, 1000)

        //-------------------------闭包应用之闭包应用场景之回调-------------------------------

        function changeSize(size) {
            return function() {
                document.body.style.fontSize = size + 'px';
            };
        }

        var size12 = changeSize(12);
        var size14 = changeSize(14);
        var size16 = changeSize(16);

        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-14').onclick = size14;
        document.getElementById('size-16').onclick = size16;
        //我们定义行为,然后把它关联到某个用户事件上(点击或者按键)。
        //我们的代码通常会作为一个回调(事件触发时调用的函数)绑定到事件上

        //-------------------------闭包应用场景之封装变量-------------------------------

        //用闭包定义能访问私有函数和私有变量的公有函数。
        var counter = (function() {
            var privateCounter = 0; //私有变量
            function change(val) {
                privateCounter += val;
            }
            return {
                increment: function() { //三个闭包共享一个词法环境
                    change(1);
                },
                decrement: function() {
                    change(-1);
                },
                value: function() {
                    return privateCounter;
                }
            };
        })();

        console.log(counter.value()); //0
        counter.increment();
        counter.increment(); //2
        //共享的环境创建在一个匿名函数体内,立即执行。
        //环境中有一个局部变量一个局部函数,通过匿名函数返回的对象的三个公共函数访问。
    </script>
</body>

</html>
20
回复 编辑