• 闭包的应用实例


    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>

    总结:

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

  • 相关阅读:
    04.VUE学习之v-text v-html
    03.VUE学习之动态绑定值
    2019年Vue学习路线图
    02.VUE学习二之数据绑定
    01.VUE学习一
    一张图解析FastAdmin中的表格列表的功能
    python 正则表达式与JSON字符串
    jQuery的select2下拉框的搜索功能(使用select2插件,方便简单)
    笔记1 python入门学习笔记
    MySQL----Navicat使用
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8308620.html
Copyright © 2020-2023  润新知