html5 - 用普通人能听懂的话回答什么是闭包

Question

我一般都是说，创建一个动态存储空间，突破作用域的限制。让外部可以访问内部的变量，感觉自己答得没什么问题啊，为什么面试完没通知？

Answer 1

The internal variables of the function are resident in memory

Answer 2

The function carries its own running environment on its back, like a snail

Answer 3

First give an understanding: A closure is a function that saves the environment when it was created (generally refers to the variables in the parent function.)
Code example:

function foo(){
    var a = 1;
    return fn(){
        alert(a);       
    }
}

Here fn is the closure.
After understanding the first half of the sentence, let’s see how to understand the second half.

function foo(){
    var date = new Date();
    //获取当前系统时间的秒数
    var a = date.getSeconds();
    return function fn(){
            console.log(a);       
    }
}
var f = foo();
f();

After executing in the browser, open the console; the number in the console is the number of seconds of the current system time. (It will change after refreshing)

Here, the closure fn is assigned to f. When f is executed, the fn function will be created. The fn function saves the parent environment at this time (that is, the value of the a variable). When refreshed again, the time when the fn function was created has changed; the value of a has also changed.

You should know what a closure is after reading this. The following is an application of closure; don’t read if you are not interested

<p>
  <ol id="clotest" start = "0">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ol>
</p>
<script type="text/javascript">
    var clotest = document.getElementById('clotest');
    var nodes = clotest.getElementsByTagName('li');
    for(var i = 0; i < nodes.length; i++){
        nodes[i].onclick = function(){
            alert(i);
        }
    }
</script>

The requirement here is which list item is clicked; which value will appear. If you click on list number 0, 0 will pop up.

But when you actually click, you find that the pop-up value is always 4. Why does this result occur?
A set of ordered lists is defined here; whichever list item is clicked on, the value will appear. If you click on list number 0, 0 will pop up.
But when you actually click, you find that the pop-up value is always 4. Why does this result occur?

Because the closure saves the variables in the parent function when it was created!

When the computer reads the code, it first performs a for loop; it assigns an anonymous function to the onclick attributes of the four nodes including nodes[0] and nodes[1].
When you click on a list item, the anonymous function is officially born; at this time, the value of the parent function i of the anonymous function is 4, so when you click on any list item, 4 pops up.
How to solve this problem?

We need to save the current value of i when each node is bound. Therefore, we can define a handler function and pass i as a parameter to the handler function.

var clotest = document.getElementById('clotest');
var nodes = clotest.getElementsByTagName('li');
for(var i = 0; i < nodes.length; i++){
    nodes[i].onclick = handler(i);
}
function handler(i){
    return function(){
        alert(i);
    }
}

This is the first function of closure, to save the scene.