Detailed explanation of js closure and garbage collection mechanism examples

Preface

Closures and garbage collection mechanisms are often difficult in front-end learning and development, and such problems are often encountered in interviews. This article records my notes on this aspect during study and work.

text

1. Closure

Closure is a difficulty of the Javascript language, but also its feature. Many advanced applications rely on closures. As a JavaScript developer, it is very important to understand closures.

1.1 What are closures?

A closure is a function that references the variable of another function. It is generated when the inner function is returned to the outside and saved. (The scope chain AO of the inner function uses the AO of the outer function)

Because the variable is referenced, it will not be recycled, so it can be used to encapsulate a private variable, but unnecessary closures will only increase memory consumption.
Closure is a mechanism for protecting private variables. It forms a private scope when a function is executed, protecting the private variables inside from external interference. In other words, closure means that the child function can use the local variables and parameters of the parent function.

1.2 Characteristics of closures

①Function nesting function

② The function can reference parameters and variables outside the function

③Parameters and variables will not be recycled by the garbage collection mechanism

1.3 Understanding Closures

Based on the knowledge of scope chains that we are familiar with, let's look at the problem of counters, how to implement a function that increases the counter by one each time the function is called.

var counter=0;
 function demo3(){
 console.log(counter+=1); 
 }
 demo3();//1
 demo3();//2
 var counter=5;
 demo3(); //6

In the above method, if the value of counter is changed at any place, the counter will become invalid. JavaScript uses closures to solve this problem, that is, functions are embedded inside functions. Let's see how to use closures to implement it.

function add() {
 var counter = 0;
 return function plus() {
 counter += 1;
 return counter
 } 
 }
 var count = add()
 console.log(count()) // 1
 var counter=100
 console.log(count()) // 2

The above is an example of the use of closures. A plus function is embedded in the add function, and the count variable refers to the returned function. Each time the external function add is executed, a piece of memory space will be opened up. The address of the external function is different, and a new address will be recreated. The plus function is nested inside the add function, thus generating a local variable counter. Each time the count function is called, the value of the local variable is increased by one, thus realizing the real counter problem.

1.4 Main implementation forms of closures

There are two main forms of learning closures here:

① Function as the return value, which is used in the above example.

function showName(){
 var name="xiaoming"
 return function(){
  return name
 }
 }
 var name1=showName()
 console.log(name1())

A closure is a function that can read variables from within another function. A closure is a bridge that connects the inside of a function with the outside of the function.

②Closure passed as parameter

var num = 15
            var foo = function(x){
                if(x>num){
                    console.log(x)
                }
              }
            function foo2(fnc){
                var num=30
                fnc(25)
            }
            foo2(foo) // 25

In the above code, function foo is passed as a parameter to function foo2. When foo2 is executed, 25 is passed as a parameter to foo. At this time, the value of num in the judgment of x>num is the num in the scope of the created function, that is, the global num, not the num inside foo2, so 25 is printed.

1.5 Advantages and Disadvantages of Closures

advantage:

① Protect the security of variables within the function, implement encapsulation, and prevent variables from flowing into other environments and causing naming conflicts

② Maintain a variable in memory for caching (but excessive use is also a disadvantage, consuming memory)

③Anonymous self-executing functions can reduce memory consumption

shortcoming:

① One of the points has been reflected above, that is, the referenced private variables cannot be destroyed, which increases memory consumption and causes memory leaks. The solution is to manually assign it to null after using the variable;

② Secondly, since closures involve cross-domain access, it will cause performance loss. We can reduce the impact on execution speed by storing cross-scope variables in local variables and then directly accessing local variables.

1.6 Use of Closures

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

  console.log(i);

Let's look at the question above. This is a very common question, but what will the output be? Most people know that the output result is 5,5,5,5,5,5. If you observe carefully, you may find that this question has many clever aspects. What is the specific output order of these 6 5s? 5 -> 5,5,5,5,5. People who understand synchronization and asynchrony can easily understand this situation. Based on the above questions, let's think about how to achieve the sequential output of 5 -> 0,1,2,3,4?

for (var i = 0; i < 5; i++) {
 (function(j) { // j = i
  setTimeout(function() {
  console.log( j);
  }, 1000);
 })(i);
 }
 console.log( i);
//5 -> 0,1,2,3,4

In this way, an anonymous function is added to the for loop. The anonymous function input parameter is the value of i each time. One second after the synchronous function outputs 5, it continues to output 01234.

for (var i = 0; i < 5; i++) {
 setTimeout(function(j) {
  console.log(j);
 }, 1000, i);
 }
 console.log( i);
 //5 -> 0,1,2,3,4

If you look closely at the setTimeout API, you'll find that it has a third parameter, which saves the problem of passing in i through an anonymous function.

var output = function (i) {
   setTimeout(function() {
   console.log(i);
   }, 1000);
  };

  for (var i = 0; i < 5; i++) {
   output(i); // The i value passed here is copied}

  console.log(i);
  //5 -> 0,1,2,3,4

Here, closure is used to pass the function expression as a parameter to the for loop, which also achieves the above effect.

for (let i = 0; i < 5; i++) {
      setTimeout(function() {
          console.log(new Date, i);
      }, 1000);
  }
  console.log(new Date, i);
  //5 -> 0,1,2,3,4

Those who know the let block scope will think of the above method. But what if you want to achieve an effect like 0 -> 1 -> 2 -> 3 -> 4 -> 5?

for (var i = 0; i < 5; i++) {
   (function(j) {
   setTimeout(function() {
    console.log(new Date, j);
   }, 1000 * j); // Modify the timer time of 0~4 here })(i);
  }

  setTimeout(function() { // Add a timer here and set the timeout to 5 seconds console.log(new Date, i);
  }, 1000 * i);
  //0 -> 1 -> 2 -> 3 -> 4 -> 5

There is also the following code, which is implemented through promise.

const tasks = [];
  for (var i = 0; i < 5; i++) { // The declaration of i here cannot be changed to let. What should I do if I want to change it?
   ((j) => {
   tasks.push(new Promise((resolve) => {
    setTimeout(() => {
    console.log(new Date, j);
    resolve(); // You must resolve here, otherwise the code will not work as expected
    }, 1000 * j); // Timer timeout gradually increases }));
   })(i);
  }

  Promise.all(tasks).then(() => {
   setTimeout(() => {
   console.log(new Date, i);
   }, 1000); // Note that we only need to set the timeout to 1 second });
  //0 -> 1 -> 2 -> 3 -> 4 -> 5

const tasks = []; // Here is the Promise for asynchronous operations
  const output = (i) => new Promise((resolve) => {
   setTimeout(() => {
   console.log(new Date, i);
   resolve();
   }, 1000 * i);
  });

  // Generate all asynchronous operations for (var i = 0; i < 5; i++) {
   tasks.push(output(i));
  }

  //After the asynchronous operation is completed, output the last i
  Promise.all(tasks).then(() => {
   setTimeout(() => {
   console.log(new Date, i);
   }, 1000);
  });
  //0 -> 1 -> 2 -> 3 -> 4 -> 5

// Simulate sleep in other languages, in fact it can be any asynchronous operation const sleep = (timeoutMS) => new Promise((resolve) => {
 setTimeout(resolve, timeoutMS);
});

(async () => { // async function expression that is executed upon declaration for (var i = 0; i < 5; i++) {
 if (i > 0) {
  await sleep(1000);
 }
 console.log(new Date, i);
 }

 await sleep(1000);
 console.log(new Date, i);
})();
//0 -> 1 -> 2 -> 3 -> 4 -> 5

Closures are used in the above code. In short, closures find the final value of the corresponding variable in the parent function at the same address.

2. Garbage collection mechanism

Memory management in JavaScript is automatic and invisible. We create primitive types, objects, functions... all of these require memory.

There are two commonly used garbage collection methods: mark-sweep and reference counting.

1. Mark-and-Sweep

When the garbage collector runs, it marks all variables stored in memory. It then strips the variables in the environment and the tokens referenced by the variables in the environment.

Variables marked after this will be considered to be deleted because they can no longer be accessed by variables in the environment.

at last. The garbage collector completes the memory cleanup, destroys the marked values, and reclaims the memory space they occupy.

2. Reference Counting

Reference counting means keeping track of how many times each value is referenced. When a variable is declared and a reference type is assigned to the variable, the reference count of the value is 1.

Conversely, if the variable containing a reference to this value obtains another value, the number of references to this value is reduced by 1. When the number of citations becomes 0,

This means that there is no way to access this value anymore, so the memory space it occupies can be reclaimed. This way, the next time the garbage collector runs,

It will release the memory occupied by values ​​whose reference count is 0.

Summarize

This is the end of this article about js closures and garbage collection mechanism. For more relevant js closures and garbage collection content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!