A detailed explanation of let and closure in ES6

This article mainly introduces an in-depth understanding of let and closure in ES6. Now I share it with you and give you a reference.

This article introduces an in-depth understanding of let and closure in ES6 and shares it with everyone. The details are as follows:

Before starting this article, let’s take a look at a piece of code

for(var i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//10

Obviously this The code outputs 10, but does not return 3 as we expected. The reason is also very simple (js variable promotion) when the function is called, it accesses i in a global scope. At this time, the for loop has been executed, and the global variable i= 10;

In the ES5 standard, if we want to return the expected 3, the usual approach is also very simple, which is to let each function in the array have a separate scope, then we only need to construct an immediate execution function That’s it (there is no block-level scope in js, only function scope and global scope are distinguished) like the following:

var array=[];
for(var i=0;i<10;i++){
  array[i]=(function(i){
  return function(){
    return i;
    }
  })(i);
}
console.log(array[3]());//3

In this way, each function in the array is in the function of an immediate execution function In the domain, the immediate execution function is passed in i. In fact, the for loop executes the following code:

  array[0]=(function(i){
  return function(){
    return i;
    }
  })(0);
  array[1]=(function(i){
  return function(){
    return i;
    }
  })(1);
  array[2]=(function(i){
  return function(){
    return i;
    }
  })(2);
……

In this way, each function in the number group corresponds to a separate function scope (the immediate execution function) here A total of 10 function scopes were created. The i value in these function scopes is the 0...9 passed in during execution. When executing

array[3]();, the i value accessed by the function is The corresponding i in the function scope is immediately executed instead of the global i value, so that we get the expected effect.

Having said that, let’s briefly talk about closures. Closures can be understood as a closure that is a stack area that has not released resources, and the variables in the stack area are in an activated state. In the above example, the system allocates memory when the for loop is executed. The js execution thread creates the execution stack area. During execution, it is detected that the variable i in the immediate execution function is referenced by the internal function, so the stack area is not released in the memory. The function ( When called (array element), the first thing accessed according to the scope chain is the variable in the upper-level scope (immediate execution of the function).

Closures will not be introduced in detail here. If you want to know more about closures, please read Chapter 7 of "Javascript Advanced Programming"

As mentioned earlier, there is no block-level scope in js, only Distinguish between global scope and function scope. In ES6, let actually adds a new block-level scope to js. For example, the following code allows functions in each array to access the values ​​in their respective scopes without creating a function scope:

let arr=[];
for(let i=0;i<10;i++){
  arr[i]=function(){
    return i;
  }
}
console.log(arr[3]());//3

We can see that we do not have to construct a function scope as before to achieve the desired effect. After introducing the block-level scope, it is more convenient for us to write and understand the code. In the above code, after the for loop {} is a block-level scope. Each returned function refers to the variable of its corresponding block scope each time it loops. Change the code slightly to look more vivid:

let arr=[];
for(let i=0;i<10;i++){
  let k=i;
  arr[k]=function(){
    return k;
  }
}
console.log(arr[3]());//3

It can be seen that ES6 introduces block scope. It will be more convenient for us to construct closure functions later.

I won’t describe much about let and const here. If you have not been exposed to ES6 before, I recommend reading "Introduction to ES6 Standards" by teacher Ruan Yifeng.

Let me mention one more thing here. After reading the concept, many people's first impression is: "const represents an immutable value, and let is used to replace the original var." Many times, let is used as a substitute for var. Use let when declaring variables. You are likely to write the following code:

 // 定义常量
const REG_GET_INPUT = /^\d{1,3}$/;

// 定义配置项
let config = {
 isDev : false,
 pubDir: './admin/'
}

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

The definition of const is a value that cannot be reassigned, which is different from an immutable value. ;The Object defined by const can still modify its properties after definition.

So in fact, its usage scenarios are very wide, including constants, configuration items, referenced components, "most" intermediate variables defined, etc., all should be defined with cosnt. On the contrary, as far as let is concerned, its usage scenarios should be relatively few. We will only use it in loops (for, while loops) and a small number of variables that must be redefined.

Conjecture: In terms of execution efficiency, since const cannot be reassigned, more optimizations in syntax static analysis can be done, resulting in higher execution efficiency.

So in the above code, all parts that use let should actually use const.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed description of using axios to solve http request problems in vue2 (detailed tutorial)

By using axios in vue2 What are the methods to introduce highcharts charts into the project?

Usage of @HostBinding() and @HostListener() in Angular (detailed tutorial)

The above is the detailed content of A detailed explanation of let and closure in ES6. For more information, please follow other related articles on the PHP Chinese website!