2007. 9. 21. 13:56
Programing/HTML/JavaScript/CSS
클로저(closure)는 자유로운(구속되지 않은) 변수들을 포함하고 있는 코드 블록이다. 이러한 변수들은 코드 블록이나 글로벌 콘텍스트에서 정의되지 않고, 코드 블록이 정의된 환경에서 정의된다. "클로저"라는 명칭은 실행할 코드 블록(자유 변수의 관점에서, 변수 레퍼런스와 관련하여 폐쇄적이지 않은)과 자유 변수들에 대한 바인딩을 제공하는 평가 환경(범위)의 결합에서 탄생한 것이다. 클로저 지원의 다양함은 Scheme, Common Lisp, Smalltalk, Groovy, JavaScript, Ruby, Python에서 찾아볼 수 있다.클로저의 가치는 함수 객체(function objects) 또는 익명 함수(anonymous functions)로서 작용하고, 유형 시스템(type system)이 데이터뿐만 아니라 코드도 나타낼 수 있어야 한다는 점에서 유형 시스템에 대한 결과도 갖고 있다. 클로저가 있는 대부분의 언어들은 함수들을 퍼스트-클래스 객체들로서 지원하는데, 함수들은 변수에 저장될 수 있고, 매개변수로서 다른 함수들에 저장되며, 동적으로 생성되고, 함수들에서 리턴된다.
- IBM developer works 인용 -
클로저란 생성시 환경의 레퍼런스를 그대로 가지고 있는 것이다.
다음 javascript 코드를 보며 설명하겠다.
<script type="text/javascript">
var example = function(){
var i = 1;
return function(){
alert(i++);
};
}();
</script>
<input type="button" onclick="example()" value="click" />
var example = function(){
var i = 1;
return function(){
alert(i++);
};
}();
</script>
<input type="button" onclick="example()" value="click" />
'click' 버튼을 클릭하면 계속 숫자가 증가하게 된다.
분명 i 라는 변수는 함수에서 선언된 지역 변수이다.
this.i 라고 객체 변수로 선언 했다면 쉽게 이해가 되겠지만 분명 지역변수로 선언되었다.
때문에 버튼을 클릭할때마다 i의 값은 매번 1이 되어야 한다.
하지만 계속 i는 증가한다.
그 이유가 바로 클로저에있다.
javascript 는 클로저를 지원하는 언어이기 때문에 return function(){} 이 선언되는 시점의 환경, 즉 지역변수 i의 레퍼런스를 가지고 있기 때문에 계속해서 i를 증가 시킬 수 있다.
어떻게 보면 상당히 난해한 개념이기도 하다.
하지만 간단한 원리-생성시의 환경 정보를 그대로 가지고 있다-만 파악한다면 쉽게 클로저를 사용 할 수 있을 것이다.
참고자료
'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글
| URL, 도메인 추출 정규식 (2) (5) | 2008.02.22 |
|---|---|
| URL, 도메인 추출 정규식 (0) | 2008.02.20 |
| 객체의 메서드로 setInterval 활용시 this 사용에 관한 문제점 (3) | 2007.08.07 |
| cloneNode 의 활용 (0) | 2007.06.14 |
| 수정이 가능한 텍스트2 - 인라인셀렉트박스?? (0) | 2007.05.31 |
