javascript 클로저 소개(Situ Zhengmei)_javascript 기술

클로저의 정의는 매우 모호합니다 - 클로저란 구문 도메인이 특정 영역에 위치하고 외부 실행 도메인의 비영속 변수 값을 지속적으로 참조(읽기 및 쓰기)하는 기능이 있는 단락을 의미합니다. 해당 영역 내에서 자체 범위입니다. 실행 범위 외부에 있는 이러한 비영속 변수는 클로저가 원래 정의(또는 생성)되었을 때 마법처럼 해당 값(딥 링크)을 유지합니다. 간단히 말해서 클로저는 상위 수준 함수 또는 범위에서 얻은 변수(키-값 쌍)의 복사본을 다른 범위에 저장하며 이러한 키-값 쌍은 상위 수준 함수의 실행을 따르지 않습니다. 완료되면. Zhou Aimin은 클로저가 "속성 테이블"이고 클로저가 데이터 블록이며 클로저가 "이름=값"을 저장하는 비교 테이블이라고 더 명확하게 말했습니다. 그렇게 간단합니다. 그러나 클로저는 런타임 개념이라는 점을 강조해야 합니다.
Javascript의 클로저에는 두 가지 특성이 있습니다.
함수 변수에 대한 참조로서 함수가 반환될 때 활성화됩니다.
클로저는 함수가 반환될 때 리소스를 해제하지 않는 스택 영역입니다.
현재 세 가지 인식된 클로저 구현이 있습니다.

코드 복사 코드는 다음과 같습니다.

with(obj){
//여기에 객체 클로저가 있습니다
}

코드 복사 코드는 다음과 같습니다.

(function(){
//함수 폐쇄
})()

코드 복사 코드는 다음과 같습니다.

try{
//...
} catch( e) {
//클로저를 포착하지만 IE에서는 그렇지 않습니다
}

몇 가지 유용한 예

코드 복사 코드는 다음과 같습니다.

//**************** 클로저 고유ID******** ********
uniqueID = (function(){ //이 함수의 호출 객체는 값을 저장합니다
var id = 0; //이것은 개인 영구 값입니다
// 외부 함수는 이에 액세스할 수 있는 영구 값을 반환합니다. 중첩 함수
//이것은 고유 ID 변수에 저장하는 중첩 함수입니다.
return function(){return id;} //Return, self -increment.
})() ; //정의 후 외부 함수를 호출합니다.
document.writeln(uniqueID()) //0
document.writeln(uniqueID());
document.writeln(uniqueID( )); //2
document.writeln(uniqueID()); //3
document.writeln(uniqueID()); >

코드 복사 코드는 다음과 같습니다.

//****** ************클로저 계승** ***********

var a = (function(n){
if(n<1){ 경고 ("잘못된 인수"); return 0;
if( n==1){ return 1; }
else{ return n * 인수.callee(n-1) }
}) 4)
document.writeln(a);

코드 복사 :

function User(properties ) {

//현재 인스턴스를 가리키려면 여기에 변수를 선언해야 합니다.
var objthis = this
for ( var i in Properties; ) {
(function(){
//클로저 내부에서 t는 매번 새로운 것이고, Properties[i]의 값은
var t = Properties[i];
내부에 있습니다. objthis[ "get" i ] = function() {return t;};
objthis[ "set" i ] = function(val) {t = val;}
})(); }
}
//테스트 코드
var user = new User({
이름: "Bob",
나이: 44
});
alert( user. getname());
alert( user.getage());
user.setname("Mike")
alert( user.getname()); ));
user.setage( 22 );
alert( user.getage()); 오늘 Wuyou에서 봤습니다:
요청:
이렇게 하세요. 세 노드의 Onclick 이벤트가 해당 매개변수를 올바르게 팝업할 수 있습니다.

코드 복사


코드는 다음과 같습니다.

• aa


• aa
;li id="a3">aa

Situ Zhengmei의 자바스크립트 클로저 <title> </title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美">Situ Zhengmei의 자바스크립트 클로저<h1> </h1> <ul>아아<li id="a1"> </li>아아<li id="a2"> </li>아아<li id="a3"> </li> </ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

내 설명은 onclick입니다. 바인딩 함수 function(){alert(i)}의 범위는 해당 li 개체이고, 경고의 i 범위는 window입니다. 각 루프는 window.i의 값을 다시 작성하므로 루프 이후 완료되면 i는 이미 4입니다. li 요소를 클릭하면 4가 됩니다.
해결책:
함수 클로저를 사용하세요.

코드 복사 코드는 다음과 같습니다.

var listed = document.getElementsByTagName("li ");
for(var i=0,l=lists.length; i < l; i ){
lists[i].onclick = (function(i){//외부 함수에 저장
return function(){
alert(i);
}
})(i)
}

코드 복사 코드는 다음과 같습니다.

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

Situ Zhengmei의 자바스크립트 클로저 <title> </title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美">Situ Zhengmei의 자바스크립트 클로저(함수 클로저)<h1> </h1> <ul>아아<li id="a1"> </li>아아<li id="a2"> </li>아아<li id="a3"> </li> </ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

사용 이벤트 프록시

코드 복사 코드는 다음과 같습니다.

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

Situ Zhengmei의 자바스크립트 클로저<title> </title> <meta charset="utf-8"> <meta name="keywords" content="javascript闭包 by 司徒正美"> <meta name="description" content="javascript闭包 by 司徒正美"> <h1>Situ Zhengmei(이벤트 에이전트)의 자바스크립트 폐쇄</h1> <ul> <li id="a1">아아</li> <li id="a2">아아</li> <li id="a3">아아</li> </ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

계속 유지 노드 요소의 임시 변수입니다.

코드 복사 코드는 다음과 같습니다.

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)}
})