The operating principle of javascript closure, the role of javascript closure

Closure 4. IIFE (self-executing function)

var n = 'cba';
(function p(){
    console.log(n)
})()
/* output
*cba
/

The closure p() is also generated, and the reference n under window exists.

Closure 5. Loop assignment

for(var i = 0; i<10; i + + ){
  (function(j){
       setTimeout(function(){
        console.log(j)
    }, 1000)
  })(i)
}

Closure 6. Throttling and anti-shake

// Anti-shake
function debounce(fn, delay = 300) {
  //default 300 milliseconds
  let timer;
  return function () {
    const args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, args); // Change this point to the object pointed to by calling debounce
    }, delay);
  };
}

window.addEventListener(
  "scroll",
  debounce(() => {
    console.log(111);
  }, 1000)
);

// Throttle
//Set a flag
function throttle(fn, delay) {
  let flag = true;
  return () => {
    if (!flag) return;
    flag = false;
    timer = setTimeout(() => {
      fn();
      flag = true;
    }, delay);
  };
}

window.addEventListener(
  "scroll",
  throttle(() => {
    console.log(111);
  }, 1000)
);

Closure 7. Function currying

function currying(fn, ...args) {
  const length = fn.length;
  let allArgs = [...args];
  const res = (...newArgs) => {
    allArgs = [...allArgs, ...newArgs];
    if (allArgs.length === length) {
      return fn(...allArgs);
    } else {
      return res;
    }
  };
  return res;
}

// Usage is as follows:
// const add = (a, b, c) => a + b + c;
// const a = currying(add, 1);
// console.log(a(2,3))

5. The role of closure

• Function 1. The variables used inside the function will still survive in the memory after the function is executed (extending the life cycle of local variables)

• Function 2. Allows data (variables/functions) inside the function to be manipulated (read and written) from outside the function

6. Life cycle of closure

1. Generation: The nested internal function fn2 is generated when it is declared (not called)

2. Dies: When a nested inner function becomes a garbage object. (For example, if f = null, you can make f a garbage object. This means that f no longer refers to the closure object at this time.

When is the closure destroyed? -Garbage collection mechanism

When is the closure destroyed?

Final conclusion - if there is no special garbage collection algorithm (no such algorithm has been found yet), the closure will become permanent! Unless manually set to null, it will cause a memory leak!

7. Disadvantages and solutions of closures

Disadvantages: After the function is executed, the local variables within the function are not released, and the memory occupied time will become longer, which may easily cause memory leaks.

Solution: If you can't use the closure, don't use it and release it in time. for example:

 f = null; // Let the internal function become a garbage object --> Recycle the closure

In short, if you need it, it is an advantage; if you don't need it, it becomes a disadvantage.

8. Memory overflow and memory leak

Memory overflow

Memory overflow: An error that occurs when a program is running. When the memory required to run the program exceeds the remaining memory, a memory overflow error will be thrown.

Code example:

 var obj = {};
    for (var i = 0; i < 10000; i + + ) {
    obj[i] = new Array(10000000); //Put all array contents into obj and save them, causing obj to occupy a large amount of memory space.
    console.log("-----");
    }

Memory leak

Memory leak: The occupied memory is not released in time.

Note that if the number of memory leaks accumulates too much, it will easily lead to memory overflow.

Common memory leaks:

• 1. Unexpected global variable

• 2. There is no timer or callback function for timely cleaning

• 3. Closure

Case 1 example:

 // Unexpected global variable
    function fn() {
        a = new Array(10000000);
        console.log(a);
    }

    fn();

Case 2 example:

 // There is no timer or callback function for timely cleaning
    var intervalId = setInterval(function () { //Do not clean up after starting the loop timer
        console.log('----')
    }, 1000)

    // clearInterval(intervalId); //Clear timer

Case 3 example:

< type="text/java">
  function fn1() {
    var a = 4;
    function fn2() {
      console.log( + + a)
    }
    return fn2
  }
  var f = fn1()
  f()

  // f = null //Let the internal function become a garbage object-->recycle the closure
</>

9. Classic interview questions

for(var i = 0;i < 5;i + + ) {
  setTimeout(function() {
    console.log(i + + );
  },4000)
}
console.log(i)

Because setTimeout is an asynchronous function, all loops will be executed first. At this time, i is 5, so a bunch of 5 will be output.

• setTimeout is a macro task. Due to the single-threaded eventLoop mechanism in JS, the macro task is executed only after the main thread synchronization task is executed. Therefore, the callbacks in setTimeout are executed sequentially after the loop ends.

• Because the setTimeout function is also a closure, its parent scope chain is window. The variable i is a global variable on the window. Before the setTimeout is executed, the variable i is already 5, so the final output sequence is 5.

Solution

• The first is to use closures

Equivalent to using the immediate execution function (IIFE)

Whenever the for loop is executed, the variable i at this time is passed to the timer, and then executed.

for(var i=0;i<5;i + + ){
  (function(x) {
    setTimeout(function() {
      console.log(x + + )
    },4000)
  })(i);
}

explain:

First create a global execution context and enter the for loop. The first round of the loop needs to execute the immediate execution function, so create a context for the immediate execution function. Here i=0, then x=0, because it is asynchronous, the browser puts the processing result into the task queue, that is, puts the value 0 into the task queue. At this time, the context of the immediate execution function is popped from the stack, returns to the global execution context, and enters the second for Loop, at this time i=1, you need to execute the immediate execution function, create the context of the immediate execution function, put the value 1 into the task queue, and the context of the immediate execution function is popped from the stack, and the following three loops Same.

When the global code is executed, the asynchronous code is executed, and the values in the task queue are output in sequence.

• The second method is to use the third parameter of setTimeout, which will be passed in as a parameter of the timer function.

for (var i = 1; i < 5; i + + ) {
  setTimeout(
    function timer(j) {
      console.log(j)
    },
    4000,
    i
  )
}

• The third way is to use let to define i to solve the problem. This is also the most recommended way.

for (let i = 1; i <5 5; i + + ) {
  setTimeout(function timer() {
    console.log(i)
  }, 4000)
}