:: 클로져 함수를 공부해보자!

자바스크립트는 내장된 함수의 지역변수를 반환해서 외부에서도 호출할 수 있는
"클로저"라는 기능을 갖는다.

중첩함수와 비슷하나 더 큰 개념이 숨어있고, 함수가 동작하는 데 필요한 데이터 영역이 확장되는 자바스크립트 만의 유연함을 보여주는 대표적인 기능이다.

예를들면,

function sayHello2(name)
{
var _hello = 'Hello';
var text =_hello + name;
var sayAlert = function() { alert(text); }
return sayAlert;
}
var say2 = sayHello2('Jane');
say2();

이 함수는 다른 함수안에 함수를 생성하였기 때문에 클로저를 가진다고 할 수 있다.

씨언어 같은 경우에는 함수가 호출되어 반환되면 메모리가 해제되기 때문에
지역변수에 접근 할 수 없는 반면 자바스크립트의 클로저함수는
함수가 존재할때 처럼 모든 지역변수의 복사본을 유지한다.
또한 꼭 가비지 컬렉션에 의해서 제거 되지 않기 때문에 var _hello = 'Hello'; 를
계속 참조하여 강제적으로 클로저를 해제하는 상태를 만들어줘야한다.

보통 say2 = null; 을 시켜주면 메모리에서 반환되어 클로저를 해제할 수 있다.

주의할 점.

function leakMemory(){
   var el = document.getElementById('el');
   var o = { 'el' : el };
   el.o = o;
}

위의 코드는 el로 식별되는 요소로 접근하기위해 DOM으로 접근한다.
그리고 이것을 매우 간단하게 표현한 함수 리터럴을 사용해서 새로운 객체 참조를 생성하는데 사용한다. 이 객체는 이름 없는 객체를 생성하고, 이 이름없는 객체는 DOM객체를 el이라는 이름의 프로퍼티에 배정한다.

그리고 나서가 문제다.
자바스크립트 객체와 DOM 객체간의 순환 참조로 인해 클로저가 종료되지 않는 경우가 발생하면, 페이지를 닫아도 할당된 메모리는 해제되지 않는다.

반복문에서 메모리가 누수된다면 그 양은 엄청나게 불어난다.
따라서, 일반적으로 함수를 내부에 정의하는 것보다, 아래 코드와 같이 작성하는것이
함수안에서 클래스 지역변수를 사용하여 클로저를 일으키지 않는 방법이다.

<script type ="text/javascript">
function myObject(){
   this.startTime = new Date();
}
myObject.prototype.elapsedTime = function(){
   var now = new Date();
   var elapsed = now - this.startTime;
   return elapsed;
}
var obj = new myObject();
function call(){
   alert("객체 나이 : " +obj.elapsedTime());
}
</script>
<input type = "button" onclick ="call();" value ="호출">

참고사이트 : http://jibbering.com/faq/faq_notes/closures.html
http://www.javascriptkit.com/javatutors/closures.shtml

Posted by eunyoung

Trackbacks List