JavaScript Advanced Closures Explained

1. The concept of closure

Let's look at the execution and inspiration of general functions:

        function stop() {
            var num = 0;
            console.log(num);
        }
        stop(); // print out num is 0
        console.log(num); // Error reporting function is not defined

1. At this time, variables inside the function cannot be accessed from outside the function

2. Variables defined inside a function will not always exist, but will disappear when the function ends.

The concept of closure:

1. It is a function that has access to variables in another scope.

2. Another way to say it is that when the lifetime of an inner function is greater than the declaration lifetime of an outer function, and the inner function is accessed by the outer scope in some way, a closure is created.

Let's look at the following closure code and explanation:

        function fn() {
            var num = 10;
            // function fun() {
            // console.log(num);
 
            // }
            // return fun;
            return function () {
                console.log(num); // 10
            }
        }
        var f = fn();
        f();

We can break it down into several parts:

1. The fn function has an internal return value and is a function.

2. The return function prints the num variable inside. The reason why the num variable can be printed is due to the access mechanism of the scope chain. The following will supplement the knowledge points of scope and scope chain.

3. We accept fn() externally using the f variable, that is, we accept the return value of fn [internal function]

4. Then f is called, which means the internal function in fn is called. Finally, it can print 10

Additional knowledge points:

1. Scope:

Variables work within a certain range, and have no effect outside of this range. This range is the scope. Scope is created when a function is defined, not when it is called.

2. Scope chain:

To summarize in one sentence: According to [internal functions can access external function variables], the proximity principle is adopted to search for variables layer by layer. This mechanism is called the scope chain.

Function A contains function B, then function B is the inner function of function A.

If an internal function wants to use a variable, it first checks whether there is such a variable inside itself.

If not, it will search in the next level up, [principle of proximity]

If the function cannot be found layer by layer, it will finally be looked for under the global variables.

        var a = 1;
        var b = 11;
        function fn1() {
            var a = 2;
            var b = '22';
            fn2();
            function fn2() {
                var a = 3;
                fn3();
                function fn3() {
                    var a = 4;
                    console.log(a); // 4
                    console.log(b); // '22'
                }
            }
        }
        fn1();

3. Garbage Collection Mechanism

You can refer to this big brother's description of the JS garbage collection mechanism:

//www.jb51.net/article/229425.htm

Let's combine these three concepts to see the role of closure

2. The role of closure:

We call function A the outer function, and there is a function B inside this function.

Use a variable f externally to receive the return value of function A [function B]

The variable in the scope of function A is called num

1. Be able to access variables inside a function from outside the function [build a channel for external access to internal scope]

Principle : Actually explained above.

First, you need to understand the principle of the chain of action as shown above. Function B can call the variable num of function A

The second thing to understand is that, first, the return value of function A is function B [internal function], and secondly, this return value must be received by variable f outside the function. After receiving it, function B can be called, and function B will access the variable num of function A. And this inner function B is the closure function.

2. It can extend the life cycle of variables inside the function.

The first effect brings about the second effect. There is a garbage collection mechanism for js variables. If the function is executed, the variables will be cleared and the memory will be eliminated. But if closures are used, variables may not be cleared immediately.

The reason is that the external variable f accepts an internal function B of function A, and this internal function accesses the variable num in the scope of function A. As long as function B is executed and variable f exists, the variable num will always exist. It will not disappear just because function A ends execution.

Refer to the following article, which is very detailed and recommended.

JavaScript Closures Explained

3. Closure Example

Some applications of closures will be added later.

We need to remember when to use closures and not abuse them.

3.1 Click li to output the index number of the current li

    <ul class="nav">
        <li>Durian</li>
        <li>Stinky tofu</li>
        <li>Canned herring</li>
        <li>Big pig's trotter</li>
    </ul>
    <script>
        // Closure application - click li to output the index number of the current li // 1. We can use the method of dynamically adding attributes var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                console.log(i); // four 4s
            }
        }
    </script>

Principle : If the above figure is written like this, the printed i will always be 4. The reason is that at this time it is first in non-strict mode. In non-strict mode, the for loop is a synchronous execution task, while the button click is an asynchronous task. After the synchronous execution is completed, i is added to 4. Then the asynchronous task prints i, which is always 4.

Solution 1: Use closure

1. The for loop generates four immediately executed functions

2. Immediately executed functions are an application of closures. All functions in the immediate execution function, including the [click callback] function, can use the parameters passed by the immediate execution function.

        for (var i = 0; i < lis.length; i++) {
            (function (i) {
                // console.log(i);
                lis[i].onclick = function () {
                    console.log(i);
 
                }
            })(i);
        }

Modification 2: var--->let

Click on the corresponding small li and print i, which is the corresponding index number. Using let is ES6 syntax, and for has block-level scope

        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                // console.log(i);
                console.log(i);
            }
        }

Method 3: Use the method of setting custom attribute index

        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) { // Note that this is var, not let
            lis[i].index = i; // Note that this is lis[i], not this.index. There is no click at this time, so where does this come from?
            lis[i].onclick = function () {
                console.log(this.index);
            }
        }

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!