클로저로 인해 해당 블록내의 코드는 만들어진 순간의 환경 정보를 그대로 가지고 있다. 그렇기 때문에 클로저안에서 선언된 변수는 생성 당시의 값을 그대로 유지할 수 있다.
클로저 내부에 구현된 "target" 이라는 지역변수에 0~9까지 값이 할당된다. 클로저 내부에 익명함수가 생성되는 순간의 "target" 값을 기억하기 때문에 각 태그를 클릭하면 그에 맞는 숫자를 본다.
클로저가 필요한 예제
var lists = [];
for(idx = 0; idx < 10; idx++){
lists[idx] = $('<li>'+idx+'</li>');
var target = idx;
lists[target].click(function() {
alert(target);
});
$('#test').append(lists[idx]);
}
for 반복문 내부에서 태그를 생성해서 클릭 이벤트를 붙여준다. 이때 "target" 변수는 계속 count가 올라가기 때문에 해당 태그들은 클릭 이벤트가 붙는다. 하지만 "target" 변수는 9로 남아있기 때문에 모든 태크를 클릭해도 9를 본다.
클로저로 구현한 예제
var lists = [];
for(idx = 0; idx < 10; idx++){
lists[idx] = $('<li>'+idx+'</li>');
(function() {
var target = idx;
lists[target].click(function() {
alert(target);
});
}());
$('#test').append(lists[idx]);
}
아래 소스는 해당 예제를 실행할 수 있는 코드이다. 테스트의 편의를 위해 하나의 파일로 만들었다.
가장 밑에 Tester.init('on')은 클로저를 수행하는 코드이고, Tester.init('off')로 변경하면 클로저를 수행하지 않는다.
'Client-Side > Javascript' 카테고리의 다른 글
| JavaScript - Zoo Keeper (0) | 2010.06.06 |
|---|---|
| CSS3와 jQuery TOOLS 를 사용한 탭디자인 (0) | 2010.05.11 |
| [Prototype, Script.aculo.us] twitter Top tweets 따라하기 (0) | 2010.04.28 |
| 이메일 체크. (0) | 2009.09.24 |
| javascript mootools addEvent 주의사항. (0) | 2009.09.17 |
