zoukankan      html  css  js  c++  java
  • 闭包的应用实例

    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>

    总结:

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

  • 相关阅读:
    ThinkPHP where方法:设置查询或操作条件
    微信小程序showToast延迟跳转页面
    uniapp微信小程序授权登录
    什么是二维码,什么是QR码?
    微信小程序授权登录开发流程图
    微信小程序提交审核并发布详细流程(一)
    微信小程序提交审核并发布详细流程2
    uniapp医院预约挂号微信小程序
    《爆款文案》写文案只需要四个步骤
    Spark学习笔记——读写ScyllaDB
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8308620.html
Copyright © 2011-2022 走看看