The introduction

For JS programmers, we are often asked about closures. Given the inside-out nature of variable search, the most straightforward explanation is that the value of a variable is determined by the context in which it is defined, not by the time the code is executed. This is often interpreted as confusing closures with the scope of variables and suggesting that you don’t understand closures well enough. In fact, it’s not.

The declaration period of a variable

The concept associated with closures is the life cycle of a variable

  var function(){
    var a=1;
    return function(){
      a++;
      console.log(a);
    }
  }
  
  var f = func();
  var a=100;
  
  f() // 2
  f() // 3
  f() // 4
  f() // 5
Copy the code

After the function call ends, A does not disappear, but persists in a closure environment, and the life cycle of the local variable is continued.

More on closures

Variable encapsulation

  var cache = {};
  
  var mult = function(){
    var args = Array.prototype.join.call(arguments, ',');
    if(cache[args]) {
      return cache[args];
    }
    
    var a=1;
    for(var i=0; i<arguments.length; i++){
      a = a*arguments[i];
    }
    
    return cache[args] = a;
  }
  
Copy the code

In the above code, the cache and mult are exposed and applied globally, encapsulated in a closure

  
  
  var mult = (function(){
    var cache = {};
    
    return function(){
        var args = Array.prototype.join.call(arguments, ',');
        if(cache[args]) {
          return cache[args];
        }

        var a=1;
        for(var i=0; i<arguments.length; i++){
          a = a*arguments[i];
        }
        return cache[args] = a;
    }
  })();

Copy the code

The above code can be further encapsulated, but this article is just about closures.

Extends the life of local variables

The collection of process and data is the most basic routine of object-oriented programming. The object is referenced in the process of method execution, while the closure contains the content in the form of above and below in the process of method execution. Object-oriented can be realized, and it can be realized if necessary.

Closure implementation

var extent = fucntion(){ var value-0; return { call: function(){ value++; console.log(value); }}}Copy the code

Object-oriented implementation

vat extent = { value: 0, call: function(){ this.value++; console.log(this.value); }}Copy the code

Closures versus memory

Closures are often said to be bad for you, one of which is that closures cause memory leaks, so use them as little as possible. The most obvious reason for this is that there is no awareness of actively reclaiming the closure’s memory.

Closures do prevent some data from being destroyed in a timely manner, since a local variable will persist if it is enclosed in the context of a closure. And for the memory impact, it is not said to be a memory leak. If we want to reclaim these variables, we can manually set them to NULL, which means that the connection between the variable and its previous reference value is broken. The next time the garbage collector runs, it removes these values and reclaims the memory they occupy.