티스토리 뷰

프로그래밍/JavaScript Web App

자바스크립트 클로저 (Closure)

쇠주는참이슬 2013. 1. 15. 14:58

클로저

 - 함수 내부의 중첩된 함수를 함수를 글로벌(전역)에서 접근가능하도록 함으로써 

   함수 내부의 지역변수에 접근가능해지는 상황 또는 함수의 지역변수를 포함하는 호출객체를 가리킴.

- 클로저를 많이 사용할 경우는 IE상에서 메모리누수가 발생할 수 있다. (성능상에도 문제가 발생할 수 있음 글로벌에서 참조하     

   기때문에 메모리릭, 메모리누수 등등 많은 문제가 발생할 수 있다)


function outer(){

var msg = "hello";

function inner(){

return msg;

}

return inner;

}


var result = outer();  // result == inner

var a = result();  // a <== outer 함수내의 지역변수 msg 값


클로저에서 에러를 피하는 법

HTML 코드

<body>

<button id="btnA">A</button>

<button id="btnB">B</button>

<button id="btnC">C</button>  

</body>


아래와같은경우는 어떤 버튼을 클릭해도 4번째 버튼이라고 나온다.

window.onload = function()

{

var list = document.getElementsByTagName("button");

 

 

for(var i=0; i < list.length; i++)

{

list[i].onclick = function()

{

alert(this.innerHTML + "는" + (i+1) + "번째버튼!");

}

} 

}


해결방법 

window.onload = function()

{

var list = document.getElementsByTagName("button");

 

var setIndex = function(index){

list[index].onclick = function(){

alert(this.innerHTML + "는" + (index+1) + "번째 버튼!");

}

}

for(var i=0; i < list.length; i++)

{

setIndex(i);

} 

}

'프로그래밍 > JavaScript Web App' 카테고리의 다른 글

자바스크립트 프로토타입 및 생성자 (C#에서 클래스 생성)  (0) 2013.01.15
자바스크립트에서의 this  (0) 2013.01.15
자바스크립트 지역변수, 전역변수의 유효범위 (중요)  (0) 2013.01.15
자바스크립트 함수 function()  (0) 2013.01.15
constructor, hasOwnProperty, in 자바스크립트 객체타입 확인  (0) 2013.01.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함