Application examples of closures

1. Overview

Closure essence: pass the inner function outside the lexical scope, and the inner function still holds the reference to the original scope.

2. Application

(1) Timer

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

    <head>
        <meta charset="UTF-8" />
        <title>Application of closure</title>
    </head>

    <body>

        <script type="text/javascript">
            function wait(message) {
                setTimeout(function timer() {
                    //Delay function callback function timer
                    //timer Internal functions have coverage wait Closure of the scope of a function, and also for variables message References to
                    console.log(message);
                }, 1000)
            }
            wait('Application of closure function')
        </script>
    </body>

</html>

(2) Event listener

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

    <head>
        <meta charset="UTF-8" />
        <title>Application of closure</title>
    </head>

    <body>

        <script type="text/javascript">
            function test() {
                var a = 0;
                //Event listener remains right test Scope access
                $('ele').on('click', function() {
                    a++;
                });
            }
        </script>
    </body>

</html>

(3)ajax

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

    <head>
        <meta charset="UTF-8" />
        <title>Application of closure</title>
    </head>

    <body>

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

</html>

(4) Asynchronous (synchronous) operation

As long as the callback function is used, the closure is actually used.

(5) Module

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

    <head>
        <meta charset="UTF-8" />
        <title>Application of closure</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>

Summary:

A function can remember and access its lexical scope, even if the function is executed outside the current lexical scope, which results in a closure.

Tags: Javascript

Posted on Sun, 03 May 2020 18:04:54 -0700 by AaZmaN