An in-depth and simple introduction to the code and text of JavaScript closures (Closure)

Closure (closure) is a very important threshold for mastering Javascript from the beginning to the in-depth. It is a difficulty of the Javascript language and also its characteristic. Many advanced applications It all depends on closure. Write down my study notes below~

Series Directory

• Explain JavaScript in a simple and easy way

• Explain JavaScript in a simple and easy way This

• An in-depth introduction to the prototype chain and inheritance of JavaScript

Closure-everywhere

In front-end programming, the use of closures is very common. We often use closures intentionally or unintentionally, directly or indirectly. Closures can make data transfer more flexible (such as handling some click events)

!function() {      
  var localData = "localData here";    
     document.addEventListener('click',    //处理点击事件时用到了外部局部变量，比如这里的localData       
        function(){              
           console.log(localData); 
    }); 
}();

Another example is the following example: (Isn’t it very friendly~~)

!function() {      
  var localData = "localData here";      
  var url = "http://www.baidu.com/";      
  $.ajax({ 
     url : url,          
     success : function() {              
        // do sth...              
        console.log(localData); 
        } 
    }); 
}();

Let’s look at another example~~this This situation is what we usually call closure

function outer() {   
  var localVal = 30;    
  return function(){      
    return localVal;    
  } 
} 
var func = outer();  
func(); // 30

In this example, calling outer() returns the anonymous function function(). In this anonymous function, you can access the local variable localVal of outer(). When outer() is called After the end, when func() is called again, the local variable localVal of outer() can still be accessed

The concept of closure

Closure, unlike ordinary functions, allows a When a function is called outside the immediate lexical scope, it can still access non-local variables. –Wikipedia

A closure is a function that can read the internal variables of other functions. - Ruan Yifeng

Since in the Javascript language, only sub-functions inside the function can read local variables, closures can be simply understood as "functions defined inside a function".

So, in essence, closure is a bridge that connects the inside of a function with the outside of the function

The purpose of closure

This part is reproduced from this blog post

Closures can be used in many places. It has two greatest uses. One is to read the variables inside the function as mentioned earlier, and the other is to keep the values ​​of these variables in memory.

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

In this code, result is actually the closure f2 function. It was run twice, the first time the value was 999, the second time the value was 1000. This proves that the local variable n in function f1 is always stored in memory and is not automatically cleared after f1 is called.

Why is this so? The reason is that f1 is the parent function of f2, and f2 is assigned to a global variable, which causes f2 to always be in memory, and the existence of f2 depends on f1, so f1 is always in memory and will not be deleted after the call is completed. , recycled by the garbage collection mechanism (garbage collection).

Another thing worth noting in this code is the line "nAdd=function(){n+=1}". First of all, the var keyword is not used before nAdd, so nAdd is a global variable. rather than local variables. Secondly, the value of nAdd is an anonymous function, and the anonymous function itself is also a closure, so nAdd is equivalent to a setter, which can operate on local variables inside the function outside the function.

Closure-Encapsulation

(function() {   
   var _userId = 23492;   
   var _typeId = 'item';    
   var export = {}; 

   function converter(userId) {          
     return +userId; 
   } 
    export.getUserId = function() {         
       return converter(_userId);     
   } 
   export.getTypeId = function() {          
      return _typeId; 
   }         
   window.export = export;   //通过此方式输出
}());

  export.getUserId(); // 23492 
  export.getTypeId();  // item 
  export._userId;    // undefined  
  export._typeId;    // undefined       
  export.converter; // undefined

Using the characteristics of closure allows us to encapsulate some complex function logic, In this example, the methods on export (getUserId, getTypeId) are called to indirectly access the private variables in the function, but _userId cannot be obtained by calling export._userId directly. This is also a commonly used feature in Node~

Common mistakes: loop closure

In the following case, we Add 3 ps with values ​​​​aaa, bbb, and ccc. What we want to achieve is to click aaa to output 1, click bbb to output 2, and click ccc to output 3

document.body.innerHTML = "<p id=p1>aaa</p>" + "<p id=p2>bbb</p><p id=p3>ccc</p>";  
for (var i = 1; i < 4; i++) {      
  document.getElementById(&#39;p&#39; + i).         
    addEventListener(&#39;click&#39;, function() {         
    alert(i); // all are 4! 
    });  
}

result Clicking aaa, bbb or ccc is all alert(4)~~

The problem is that the value of i is already 4 when the initialization is completed

To achieve what we want, click aaa to output 1, click bbb to output 2, and click ccc to output 3. We need to use the closure technique. In each loop, wrap it with an anonymous function that is executed immediately, like this If you do this, the value of alert(i) each time will be taken from i in the closure environment. This i will output 1, 2, and 3 from the assignment i of each loop.

document.body.innerHTML = "<p id=p1>aaa</p>" + "<p id=p2>bbb</p>" + "<p id=p3>ccc</p>";  
for (var i = 1; i < 4; i++) {
  !function(i){ //②再用这个参数i，到getElementById()中引用     
    document.getElementById(&#39;p&#39; + i).       
      addEventListener(&#39;click&#39;, function() {         
      alert(i); // 1,2,3
     });  
  }(i);  //①把遍历的1，2，3的值传到匿名函数里面
}

Thinking Questions

If you can understand the results of the following two pieces of code, you should understand the operating mechanism of closures. (From Teacher Ruan) This question is summarized in seconds~~

Code Fragment One

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

Code Fragment Two

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

The above is an in-depth explanation of JavaScript closures (Closure) Code pictures and texts are introduced in detail. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!