자바스크립트 클로저 (Closure)
클로저
- 함수 내부의 중첩된 함수를 함수를 글로벌(전역)에서 접근가능하도록 함으로써
함수 내부의 지역변수에 접근가능해지는 상황 또는 함수의 지역변수를 포함하는 호출객체를 가리킴.
- 클로저를 많이 사용할 경우는 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);
}
}