Understand js closures in one minute_javascript skills

What is a closure?
Look at a piece of code first:

function a(){
  var n = 0;
  function inc() {
    n++;
    console.log(n);
  }
  inc(); 
  inc(); 
}
a(); //控制台输出1，再输出2

Keep it simple. Let’s look at a piece of code again:

function a(){
  var n = 0;
  this.inc = function () {
    n++; 
    console.log(n);
  };
}
var c = new a();
c.inc();  //控制台输出1
c.inc();  //控制台输出2

Keep it simple.

What is a closure? This is closure!

Functions that have access to variables in the scope of another function are closures. Here the inc function accesses the variable n in the constructor a, so a closure is formed.

Look at a piece of code again:

function a(){
  var n = 0;
  function inc(){
    n++; 
    console.log(n);
  }
  return inc;
}
var c = a();
c();  //控制台输出1
c();  //控制台输出2

See how it works:

var c = couter(), this sentence couter() returns the function inc, then this sentence is equivalent to var c = inc;

c(), this sentence is equivalent to inc(); Note that , the function name is just an identifier (pointer to the function), and () is the execution function.

The translation of the next three sentences is: var c = inc; inc(); inc();, is it different from the first piece of code? No.

What is a closure? This is closure!

All textbook tutorials like to use the last paragraph to explain closures, but I think this complicates the problem. What is returned here is the function name. Students who have not seen Tan Haoqiang’s C/C++ programming may not immediately realize the difference between using () and not. In other words, this writing method has its own trap. Although this way of writing is more elegant, I still like to simplify the problem. Look at code 1 and code 2. Are you still confused about the function call? Are you confused about the value of n?

Why do you write it like this?
We know that each function of js is a small dark room. It can obtain information from the outside world, but the outside world cannot directly see the content inside. Put variable n into a small black room. Except for the inc function, there is no other way to access variable n. Moreover, defining variable n with the same name outside function a does not affect each other. This is the so-called enhanced "encapsulation" .

The reason why return is used to return the function identifier inc is because the inc function cannot be directly called outside the a function, so return inc is linked to the outside. This in code 2 also links inc to the outside.

Common Traps
Look at this:

function createFunctions(){
  var result = new Array();
  for (var i=0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
  console.log(funcs[i]());
}

At first glance, I thought it would output 0~9, but I never thought it would output 10 10s?

The trap here is: Function with () is the execution function! A simple sentence like var f = function() { alert('Hi'); }; will not pop up the window. Only when followed by the sentence f(); will the code inside the function be executed. The translation of the above code is:

var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
...
result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
i = 10;
funcs = result;
result = null;

console.log(i); // funcs[0]()就是执行 return i 语句，就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句，就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句，就是返回10

Why is only result collected but not i? Because i is still referenced by function. Just like a restaurant, the plates are always limited, so the waiter will patrol the table to collect the empty plates, but how dare he collect the plates that still contain vegetables? Of course, if you manually empty the dishes on the plate (=null), the plate will be taken away. This is the so-called memory recycling mechanism.

As for how the value of i can still be retained, in fact, after reading all the way from the beginning of the article, there should be nothing to worry about. Shouldn’t one piece of the food on the plate be missing after eating one piece?

To summarize
Closure is a function that refers to a variable of another function. Because the variable is referenced, it will not be recycled, so it can be used to encapsulate a private variable. This is both an advantage and a disadvantage. Unnecessary closures will only increase memory consumption! In addition, when using closures, you should also pay attention to whether the value of the variable meets your requirements, because it is like a static private variable. Closures are usually mixed up with many things. Only by getting in touch with them can you deepen your understanding. Here is just the beginning to talk about the basic things.

Link to this article: http://www.cnblogs.com/qieguo/p/5457040.html

The above is the entire content of this article, I hope it will be helpful to everyone’s study.