闭包的应用实例

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

新老客户大回馈,云服务器低至5折

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>

总结:

函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这是就产生了闭包。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:echarts属性的设置(完整大全)

下一篇:词法作用域