A brief discussion on closures in javascript_javascript skills

I didn’t understand closures for a long time. Later, I learned about scope and this related issue before I understood closure-related knowledge.
Closure is also a common interview question. To put it simply, it is a function nested function.

Function as return value:

function foo () {
  var a = 1;
  return function () {
   a++;
   console.log(a);
  }
}
var aaa = foo();
aaa(); //2
aaa(); //3

In fact, this code is not difficult to understand. aaa points to a new function returned by foo(), but the a variable is referenced in this function, so when the foo function is executed, the variable a still exists in the memory and is not released. That is, a is 2 and 3 respectively.

Function as parameter:

var a = 10;
function foo () {
console.log(a);
}
function aaa(fn) {
 var a = 100;
 fn();
}
aaa(foo);

According to my previous understanding, when the fn function is executed in the aaa function, then if it does not have a variable, go to the parent scope to find the a variable. Here it is 100. Is the result 100?

Unfortunately, the answer is no. The result here is 10. Teacher Wang Fupeng's blog explains it better. He said that the scope value of this function should be created instead of the "parent scope".

Usage scenarios of closures

Because I am still relatively new, I will take a simple example here. When li is clicked, the position of li in ul, which is the index value, pops up.

html code:

<ul>
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

js code:

Example 1:
Please look at the code below. After running it, you find that no matter which li is clicked, the result is 3.

var aLi = document.getElementsByTagName('li');
for (var i = 0; i<aLi.length; i++) {
  aLi[i].onclick = function() {
   alert(i);
  }
}

Because there is no i variable in the anonymous function, when for ends, we click on the li tag of the page. At this time, i is already 3.

Example 2:

aLi[i].onclick = (function(i){
    return function(){
      alert(i);
    }
  })(i);

This time, the method is to use the function as the return value, and pass the variable i through the parameters of the self-executing function. Then, because the return function refers to the i variable, the i variable will not be released when the for loop ends. That is, the value of the i variable is saved in memory. Based on this principle, it is easy to cause memory leaks in lower versions of IE.

Example 3:

for (var i = 0; i<aLi.length; i++) {
  (function(i){
    aLi[i].onclick = function(){
      alert(i);
    }
  })(i);
}

This principle is similar to the above.

Xiaomi front-end closure interview questions:

function repeat (func, times, wait) {
} //这个函数能返回一个新函数，比如这样用

var repeatedFun = repeat(alert, 10, 5000)
//调用这个 repeatedFun ("hellworld")

//会alert十次 helloworld, 每次间隔5秒

My answer:

function repeat (func, times, wait) {
  return function(str) {
    while (times >0) {
      setTimeout(function(){
        func(str);
      },wait);
      times--;
    }
  }
}

var repeatedFun = repeat(alert, 10, 100);
repeatedFun ("hellworld");

The above is the entire content of this article. I hope it will be helpful to everyone learning javascript closures.