“This is the 24th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello, everyone, I touch fish small public, the real strong, will not complain, if you do not want to be looked down upon by others, you have to pay more than others ten times a hundred times more effort, to stand higher than others. The last article shared several common JS packages used in projects; Today we are going to look at the use of closure functions, recursive functions in JS.

The closure function

Summary: To understand closures, you must understand the special scope of JS variables (global and local).

JS language special place, lies in the function inside can access the global variable

var a=11 function fn(){ console.log(a) } fn(); / / 11Copy the code

However, internal local variables cannot be accessed from outside the function

function fn(){
var a=11
}
console.log(a); //error
Copy the code

Then remove var from the internal variable of the function, and the variable is promoted to a global variable

function fn(){
 a=11
}
fn()
console.log(a) // 11

Copy the code

Closure purpose: You can access variables inside functions through closures and keep them in memory at all times.

Note: Closures cause variables in functions to be stored in memory, which can be expensive, so don’t abuse closures, which can cause performance problems for web pages and memory leaks in IE. The solution then is to delete all the local variables that are not applied before exiting the function

1. Use closures to solve variable pollution problems

The original code

var list = document.getElementById("ulDemo").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { var li = list[i]; Li.onclick = function () {console.log(I)}}Copy the code

Code solved with closures

var list = document.getElementById("ulDemo").getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        var li = list[i];
        (function(i){
            li.onclick = function () {
              console.log(i); // 0 1 2 3
        }
        })(i)
    }
Copy the code

There is a more straightforward solution to this problem: change the var in for to let.

2. Access to variables inside the function

Here we need to access the b variable in f1. There are two key places, the first one is the return b in f1, the second one is n=f1(), and then print n. If there is no code in these two places, we cannot access the internal variable of the function, and print undefind.

function fn(){ let a=1; function f1(){ let b=2; console.log(a); return b; } n=f1(); console.log(n) }; fn(); / / 1. 2Copy the code

Recursive function

A recursive function is a function that calls itself. When a condition is met, the function stops calling itself. Otherwise, the function continues to call. Be sure to include an end condition, otherwise it will become an endless loop.

So let’s look at a cumulative example

function add(num1, num2) { var num = num1 + num2; If (num2 +1 > 50) {return num2+1 > 50; } else { return add(num, num2 + 1); } } console.log(add(1, 2)); / / 1275Copy the code

Recursive functions cannot be defined as inline functions.

According to the above code

var addOne=add
add=null
console.log(addOne(1, 2)) //add is not a function

Copy the code

So let’s look at the workaround and use arguments.callee instead of the function name.

Inside the function, there are two special objects: Arguments and this. The main use of Arguments is to hold function arguments, but this object also has a property called Callee, which is a pointer to the function that has the arguments object.

function add(num1, num2) {
  var num = num1 + num2;
  if (num2 + 1 > 50) {
    return num;
  } else {
    return arguments.callee(num, num2 + 1);
  }
}
var addOne=add
add=null
console.log(addOne(1, 2)) // 1275
Copy the code

Conclusion:

Well, this is the end of the article, welcome everyone (like + comment + attention) have a question can exchange with each other. I hope this article is helpful and I hope you can support me more. Today is the 24th day of my participation in the first Wenwen Challenge 2022. Come on!