JavaScript Basics: Closures (closure)

(1)
javascript variable characteristics: The function can read the global variables directly, but outside the function cannot read local variables inside the function.
When declaring variables inside a function, be sure to use the var command. If not, the declaration is a global variable!

closures are functions that have access to variables within another function's scope
function to remember the context of the scope where you defined it
The purpose of closures: You can read variables inside the function, so that the values of these variables are always in memory, and will not be automatically cleared after the call.
Considerations for using closures:
Normally, after the function call finishes, the execution environment of the function leaves the environment stack, the defined variables are reclaimed by the garbage collection mechanism, the variable objects are destroyed, and the memory is freed. But because of the effect of closures, the variables of the function may be referenced again, and the garbage collection mechanism will not discard the variables, preserving the corresponding variable objects in memory. This increases the footprint of the memory. Cause a Web page performance problem. Workaround, delete the unused local variables before exiting the function.

eg:
function Myfuntion () {
var n=1;
}
alert (n);
//uncaught referenceerror:n is not defined (...)
cannot read local variables inside a function outside the function
funtion outer () {
var a=1;
function inner () {
Console.log (a);
}
return inner;
}
var innerfunction=outer ();
innerfunction ();//1
//Inside the function, define a function. Inside can access the A,outer execution when the inner, as the return value.
//innerfunction (), execution is inner execution.
eg:
var inner;
function outer () {
var a = 1;
var b = 2;
inner = function () {
Console.log (a);
Console.log (b);
}
}
outer ();///execute when the intrinsic function is assigned to the global inner
var a = 2;
var b = 3;
inner ();//when called. First find the scope of your own definition a=1;b=2
Console.log (a);
Console.log (b);
//1
//2
//2
//3
eg:
function Outer (x) {
function inner (y) {
console.log (x + y);
}
return inner;
}
var innerfunction = outer (1);//x is 1.
innerfunction (2);//3 y is 2.
innerfunction (3);//4 y is 3.
innerfunction (4);//5 y is 4.
innerfunction (5);//6 y is 5.
(2) When the function is re-referenced, the closure is a new closure.
The active objects within each closure returned by return are independent
the variable count in InnerFunction1, InnerFunction2 is independent, stored in the respective scope, non-interference
function outer () {
var count = 0;
function inner () {
count++;
Console.log (count);
}
return inner;
}
var innerFunction1 = outer ();
var innerFunction2 = outer ();
InnerFunction1 ();
InnerFunction1 ();
InnerFunction2 ();
InnerFunction2 ();
InnerFunction1 ();
InnerFunction1 ();
//1
//2
//1
//2
//3
//4
(3) The This value in the closure
in the function, this points to the object that called the function, or to the Window object if no explicitly called object.
var name= "Xiao A";
var obj={
name: "Xiao B",
getname:function () {
return function () {
return this.name;
}
}
}
alert (Obj.getname () ());
//xiao A
//obj.getname () returns a function (anonymous function) when executing
//function () {
//return this.name;
//}
//var k=obj.getname () =function () {
//return this.name;
//};
//global scope. () execution. This is the window
(4)
var name= "Xiao A";
var obj={
name: "Xiao B",
getname:function () {
var o=this;
return function () {
return o.name;
}
}
}
alert (Obj.getname () ());
//xiao B
//obj.getname () returns a function (anonymous function) when executing
//function () {
//return o.name;
//}
//var k=obj.getname () =function () {
//return o.name;
//};
//() execution. O is this is the obj
(5):
var name = ' Global ';
var obj = {
name: ' obj ',
dose:function () {
this.name = ' dose ';
return function () {
return this.name;
}
}
}
alert (Obj.dose (). Call (this))
//obj.dose (). Call (this) is equivalent to replacing the This object in the function run environment with window
//window.name
//' Global '
(6)
function f (x) {
var temp=x;//local Variables
return function (x) {
temp+=x;
alert (temp);
}
}
var a=f (+);
//a is function (x) {
//temp+=x;
//alert (temp);
//}
A (5);//55
A (ten);//65
A (//85);
(7)
function Fun (n,o) {
console.log (o)
return {
fun:function (m) {
return Fun (m,n);
}
};
}
var a = Fun (0), A.fun (1), A.fun (2), A.fun (3) ;
var b = Fun (0). Fun (1). Fun (2). Fun (3);
var c = Fun (0). Fun (1); C.fun (2); C.fun (3) ;
//undefined at the beginning of fun (0); no value, so O is undefined .
//0 N=0;a.fun (1); M=1;fun (m,n); Fun (1,0) ;
//0 Ibid .
//0 Ibid .
//undefined Fun (0); no value, so O is undefined n=0
//0 Fun (0). Fun (1), M=1;fun (M,n); fun (1,0); n=1;
//1 Fun (0), Fun ( 1), Fun (2), m=2, Fun (M,n), Fun (2,1), n=2;
//2 Ibid .
//undefined at the beginning of fun (0); no value, so O is undefined .
//0 Fun (0). Fun (1), M=1;fun (M,n); fun (1,0); n=1;
//1 C.fun (2); M=2;n=1;fun (m,n); Fun (2,1) ;
//1 C.fun (3); M=3;n=1;fun (m,n); Fun (3,1) ;
(8)
after the//for loop executes. Result is garbage collected, but I will not. It's still useful .
//i = ten;
//funcs = result;
//result = null;
function Myfuntion () {
var result = new Array ();
For (var i=0; i <; i++) {
Result[i] = function () {
return i;
};
}
return result;
}
var funcs = myfuntion ();
For (var i=0; i < funcs.length; i++) {
Console.log (Funcs[i] ());
}
//output is 10 x
//function band () is the execution function
//result[0] = function () {return i;};
//...
//result[9] = function () {return i;};//function not executed, function inside invariant i!
//function internal for loop after i = ten;
//funcs[0] () return i;
(9) Resolve Memory issues
Function Example () {
var Ele=document.getelementbyid ("Someelement");
Ele.onclick = function () {
alert ("This is a leak!");
}
ele= null;//variable set to NULL
}
a copy of the//ele.id is stored in a variable
Function Example () {
var ele= document.getelementbyid ("someelement");
var id = ele.id;
Ele.onclick = function () {
alert (ID);
};
ele = null;
}

Garbage collection Mechanism Recycling

JavaScript Basics: Closures (closure)