What is a closure? Let's talk about closures in JavaScript and see what functions they have?

What is closure? See what closures do? The following article will talk about closures in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

In the process of front-end learning, we will inevitably encounter many problems, so today we will talk about two problems from the perspective of a beginner:

What is a closure?

What are the functions of closures?

In fact, closures are everywhere when we learn javascript, you just need to be able to recognize and accept it. Closures are not a tool that requires learning a new syntax or pattern to use. Closures are a natural consequence of writing code based on lexical scope. We rarely need to intentionally create closures when writing code.

I believe that many friends are already muttering in their hearts, what is this lexical scope? Don’t panic, just listen to me slowly. In short, lexical scope is defined in lexical scope. scope of the stage. In other words, lexical scope is determined by where you place variables and block-level scopes when you write your code, so the scope remains unchanged when the lexical analyzer processes the code (most of the time) . ——"JavaScript Volume You Don't Know"

Let's take an example first

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

var myArr = test()
// myArr[0]()
// myArr[1]()
// ...

for(var j = 0; j < 10; j++){ 
   myArr[j]()
}
//为了避免繁琐此处使用了第二个循环来调用test函数里第一个循环里函数的打印出十个结果

Let's analyze this code first: When this code is executed, according to common sense analysis, ten numbers from 0 to 9 should be printed out in sequence; but the for loop does not take time to run (neglected in microseconds). When the function test returns arr, arr[ ] Inside are 10 function(){console.log(i);}. At this time, the functions in the array are not executed. When var myArr = test() calls the test function, since the execution time of the for loop is ignored, this At this time, i is already 10, so 10 10s are printed.

I believe someone will ask at this time, what does this have to do with the closure we are going to talk about? So what if we slightly modify this code and change it into an accumulator? To realize him?

I believe there will be big shots at this time saying that isn’t that simple?

Change the var definition to a let definition so that the first for loop becomes a block-level scope, then it can become an accumulator. Of course there is no problem,

But what we are talking about today is how to implement an accumulator in ES5. Then let's take a look at the following code:

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

var myArr = test()

for(var j = 0; j < 10; j++){ 
    myArr[j]()
}

Careful friends will definitely find that this is changing the function body in the loop into a self-executing function, but the output result at this time is Ten numbers are output from 0 to 9 in sequence, which contains closures. When we start executing this code, the second for loop will be called ten times. When each self-executing function is executed, a self-executing function will be created. The AO object of the executing function. There is an attribute named j in the AO object of the self-executing function. Normally, after the execution of the self-executing function, its AO object should be destroyed, but when myarr[j] ( ) is executed, the attribute name j is searched for in the AO object of arr[j] at the top of the scope chain, but it is not found. Then, we search down the scope chain and find it in the AO object of the self-executing function, so when the self-executing function When the execution function ends, its AO object will not be recycled by the garbage collection mechanism, otherwise an error will be reported when myarr[j] () is executed, and a closure will be formed at this time.

When a function is saved externally, a closure will be generated

Let’s give another example

function a(){
    function b(){
        var bbb = 234
        console.log(aaa);
    }
    var aaa = 123
    return b // b出生在a里面，但是被保存出去了
}

var glob = 100
var demo = a()
demo()

In this code we First, use precompilation to analyze. First, define a global GO object. Find the global declaration and find the global variable declaration. Use the variable declaration as the attribute name of GO and the value is undefined. Find the function declaration globally and use the function name as The attribute name of the GO object, and the value is assigned to the function body. At this time it should be GO{ glob: undefined--->100; demo: undefined; a: fa(){} }; Then create an AO{ aaa: undefined--->123;b: fb(){} } for function a, and finally precompile function b in function a to create an AO{ b: undefined-- ->234};The order of the scope chain at this time is 1. AO object of function b; 2. AO object of function a; 3. Global GO object. When we print aaa in function b, we start from the top of the scope chain. If there is no aaa in the AO object of function b, we will search down along the scope chain to find the AO of the second-level function a. The object is to find the value of aaa as 123 and output the result.

如果我们没有从预编译的角度去分析就会认为此时的aaa应该会报错的，当var demo = a()执行时，当a函数执行结束，那么a对应的AO对象应该被销毁了，照常理分析当我们执行demo时作用域链此时应该会创建b的AO对象和GO对象，此时只有b的AO对象，没有a的AO对象，应该不能打印出aaa的值，但是此时aaa的值为123，则说明a的AO对象没有被销毁，那么为什么呢？原因就在于这里创建了闭包，当var demo = a()执行结束之后，垃圾回收机制会来问，a函数老兄，我看你都执行完毕了，你的运行内存是不是可以给我释放了，但是此时a函数只能无奈摇摇头说道，老哥，我也不确定我有没有执行完毕，我执行完创建了一个b，但是b又不归我管，所以我也不确定b有没有被调用，所以我也不确定我有没有执行完毕，垃圾回收机制想了想，既然你都不知道那我就不回收了，要是回收了还没执行完的就该报错了，所以此时a的AO对象就没有被回收。

补充全面一点就是：当一个函数内部的函数被保存到函数外部时，就会产生闭包。

相信通过这两个例子，你已经对闭包有了一个大概的了解，那接下来我们说一下闭包有哪些作用。

闭包的作用

• 1. 实现公有变量 例如：累加器（3.js）
• 2. 做缓存
• 3. 可以实现封装，属性私有化
• 4. 模块化开发，防止污染全局变量

我们对闭包的作用也来一个例子（3.js）

 var count = 0
 function add() {
   return count++
 }
 console.log(add());
 console.log(add());
 console.log(add());

这是一段比较普通的累加的代码，但是如果我们在实习甚至是工作的时，公司要求你把累加器封装成一个模块化的代码，那么
此时，为了模块化我们尽可能避免定义全局变量，但是不定义全局变量我们如何实现呢，此时我们就可以用到闭包了；

function add() {
    var count = 0
    function a() {
      ++count
      console.log(count);
    }
    return a
  }
  var res = add()
  res()
  res()
  
  //add函数结束之后，add的AO对象没有被销毁，因为add函数执行完了之后，返回的a不知道是否被调用就形成了闭包，这样
  就能使得不使用全局变量也能封装成一个模块化的累加器。

结语

那么关于闭包以及闭包的作用相关的一些个人见解就是这些，目前对于闭包也只是一些浅显的了解，后期学习之后完善过后会出后续关于闭包的相关文章，感谢您的观看，欢迎批评斧正，一起共同进步。

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of What is a closure? Let's talk about closures in JavaScript and see what functions they have?. For more information, please follow other related articles on the PHP Chinese website!