Introduction
In a function, the variables may come from global variable like window
, local variable, or the variable of its ancestor functions. If the variable comes from its ancestor functions, it is called Closure
in JavaScript.
There are three variable scopes: Local
, Closure
and Global
. If the variable is coming from its ancestor function and the child function is still being used, the variable in the ancestor function will be saved and it will not be recycled by JavaScript garbage collection.
In JavaScript garbage collection, if the where-used list for a variable/function/object is 0, it will be recycled. Otherwise, it will be kept. If Closure
is used and the child function is still in used, the ancestor function and its variable will be kept since the where-used list is not 0.
Understand variable scope
In the below case, the output of f1, f2, f3
will be all 16
, because the variable scope is finalized in the return arr;
statement. When the statement return arr;
is executed, the variable i
is 4
.
1 | function count() { |
To fix the issue in the above case, we can change the code as below. In the below case, the variable i
is finalized and passed to n
when the statement (function(n){...})(i);
is executed. When the statement is executed, the variable i
is 1, 2, 3
.
1 | function count() { |
Reference
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
Closure by Liao Xue Feng