闭包的应用实例

2018-06-24 01:19:35来源：未知阅读 ()

1、概述

闭包实质：将内部函数传递到所在的词法作用域以外，内部函数仍然持有对原始定义作用域的引用。

2、应用

（1）定时器

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

    <head>
        <meta charset="UTF-8" />
        <title>闭包的应用</title>
    </head>

    <body>

        <script type="text/javascript">
            function wait(message) {
                setTimeout(function timer() {
                    //延时函数回调函数timer
                    //timer内部函数具有涵盖wait函数作用域的闭包，还有对变量message的引用
                    console.log(message);
                }, 1000)
            }
            wait('闭包函数应用')
        </script>
    </body>

</html>

（2）事件监听器

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

    <head>
        <meta charset="UTF-8" />
        <title>闭包的应用</title>
    </head>

    <body>

        <script type="text/javascript">
            function test() {
                var a = 0;
                //事件监听器 保持对test作用域的访问
                $('ele').on('click', function() {
                    a++;
                });
            }
        </script>
    </body>

</html>

（3）ajax

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

    <head>
        <meta charset="UTF-8" />
        <title>闭包的应用</title>
    </head>

    <body>

        <script type="text/javascript">
            ! function() {
                var localData = "localData here";
                var url = "http://www.baidu.com/";
                //ajax使用了localData，url
                $.ajax({
                    url: url,
                    success: function() {
                        // do sth...              
                        console.log(localData);
                    }
                });
            }();
        </script>
    </body>

</html>

（4）异步（同步）操作

只要使用了回调函数，实际上就是使用了闭包。

（5）模块

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

    <head>
        <meta charset="UTF-8" />
        <title>闭包的应用</title>
    </head>

    <body>

        <script type="text/javascript">
            var foo = (
                function Module() {
                    var something = 'cool';
                    var another = [1, 2];

                    function doSomething() {
                        console.log(something)
                    }

                    function doAnother() {
                        console.log(another.join(','))
                    }
                    return {
                        doSomething: doSomething,
                        doAnother: doAnother
                    }
                }
            )();
            foo.doSomething();
            foo.doAnother();
        </script>
    </body>

</html>