Introduction to closures in javascript (Situ Zhengmei)_javascript skills

The definition of closure is very obscure - a closure refers to a paragraph whose syntactic domain is located in a specific area and has the ability to continuously refer to (read and write) non-persistent variable values ​​​​in the execution domain outside its own scope within the area. . These non-persistent variables outside the execution scope magically retain their values ​​(deep links) when the closure was originally defined (or created). Simply put, a closure stores a copy of the variables (key-value pairs) it obtains from the upper-level function or scope in another scope, and these key-value pairs will not follow the execution of the upper-level function. Destroyed upon completion. Zhou Aimin said more clearly that closure is an "attribute table", closure is a data block, and closure is a comparison table that stores "Name=Value". It's that simple. However, it must be emphasized that closure is a runtime concept.
Closure in Javascript has two characteristics:
As a reference to a function variable - it is activated when the function returns.
A closure is a stack area that does not release resources when a function returns.
There are currently three recognized closure implementations:

Copy code The code is as follows:

with(obj){
//Here is the object closure
}

Copy code The code is as follows:

(function(){
//Function closure
})()

Copy code The code is as follows:

try{
//...
} catch(e) {
//catch closure but not in IE
}

A few useful examples

Copy code The code is as follows:

//**************** closure uniqueID****************
uniqueID = (function(){ //The calling object of this function saves the value
var id = 0; //This is the private persistent value
//The outer function returns a persistent value that has access to it The nested function
//That is the nested function we save in the variable uniqueID.
return function(){return id;}; //Return, self-increment.
})() ; //Call the outer function after definition.
document.writeln(uniqueID()); //0
document.writeln(uniqueID()); //1
document.writeln(uniqueID( )); //2
document.writeln(uniqueID()); //3
document.writeln(uniqueID()); //4

Copy code The code is as follows:

//******************closure factorial** ***********
var a = (function(n){
if(n<1){ alert("invalid arguments"); return 0; }
if( n==1){ return 1; }
else{ return n * arguments.callee(n-1); }
})(4);
document.writeln(a);

Copy code The code is as follows:

function User( properties ) {
//A variable must be declared here to point to the current instance
var objthis = this;
for ( var i in properties ) {
(function(){
//Inside the closure, t is new every time, and the value of properties[i] is inside for
var t = properties[i];
objthis[ "get" i ] = function() {return t;};
objthis[ "set" i ] = function(val) {t = val;};
})();
}
}
//Test code
var user = new User({
name: "Bob",
age: 44
});
alert( user.getname());
alert( user.getage());
user.setname("Mike");
alert( user.getname());
alert( user.getage());
user.setage( 22 );
alert ( user.getname());
alert( user.getage());

Attached is the question I saw on Wuyou today:
Request:
Let this The Onclick events of the three nodes can correctly pop up the corresponding parameters.

Copy code The code is as follows:

• aa


• aa

< ;li id="a3">aa

<title>javascript closure by Situ Zhengmei</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <h1> </h1>javascript closure by Situ Zhengmei<ul> <li id="a1"> </li>aa<li id="a2"> </li>aa<li id="a3"> </li>aa</ul>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

My explanation is, onclick The scope of the binding function function(){alert(i)} is the corresponding li object, and the scope of i in alert is window. Each loop is rewriting the value of window.i, so after the loop is completed, i is already 4, whichever li element is clicked is 4.
Solution:
Use function closures.

Copy code

The code is as follows:

var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i ){
lists[i].onclick = (function(i){//Save in external function
return function(){
alert(i);
}
})(i);
}

Copy code

The code is as follows:

var lists = document.getElementsByTagName("li");
for(var i=0,l=lists. length; i < l; i ){
lists[i].onclick = new function(){
var t = i;
return function(){
alert(t 1)
}
}
}

<title> </title>javascript closure by Situ Zhengmei<meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <h1> </h1> <ul>javascript closure by Situ Zhengmei (function closure)<li id="a1"> </li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>aa
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

Use event proxy Copy code

The code is as follows:


var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(){
var e = arguments[0] || window.event,
target = e.srcElement ? e.srcElement : e.target;
if(target .nodeName.toLowerCase() == "li"){
alert(target.id.slice(-1))
}

}

<title> </title> <meta charset="utf-8">javascript closure by Situ Zhengmei<meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <h1> </h1> <ul> <li id="a1">javascript closure by Situ Zhengmei (event agent)</li> <li id="a2"> </li>aa<li id="a3"> </li>aa</ul> aa

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

Keep temporary variables in the element on the node. Copy code

The code is as follows:

var lists = document.getElementsByTagName("li");
for(var i=0,t=0,el; el = list[i++];){
el.i = t++
el.onclick = function(){
alert(this.i)
}
}

<title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,t=1,el; el = lists[i++];){ el.i = t++ el.onclick = function(){ alert(this.i) } } } </script> <h1>javascript闭包 by 司徒正美（将临时变量变成某一个对象的属性）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

使用with语句造成的对象闭包。

复制代码 代码如下:

var els = document.getElementsByTagName("li")
for(var i=0,n=els.length;iwith ({i:i})
els[i].onclick = function() { alert(this.innerHTML+i) };
}

<title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <script type="text/javascript"> window.onload = function(){ var els = document.getElementsByTagName("li") for(var i=0,n=els.length;i<n;i++){ with ({i:i}) els[i].onclick = function() { alert(i) }; } } </script> <h1>javascript闭包 by 司徒正美（对象闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

使用try...catch语句构造的异常闭包：

复制代码 代码如下:

var lists = document.getElementsByTagName("li");
for(var i=0,l=lists.length; i < l; i++){
try{
throw i;
}catch(i){
lists[i].onclick = function(){
alert(i)
}
}
}

<title>javascript闭包 by 司徒正美</title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <script type="text/javascript"> window.onload = function(){ var lists = document.getElementsByTagName("li"); for(var i=0,l=lists.length; i < l; i++){ try{ throw i; }catch(i){ lists[i].onclick = function(){ alert(i) } } } } </script> <h1>javascript闭包 by 司徒正美（异常闭包）</h1> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

复制代码 代码如下:

var els = document.getElementsByTagName("li");
(''+Array(els.length+1)).replace(/./g,function(a,i){
els[i].onclick=function(){alert(i)}
})