Javascript 의 closure와 anoymous function

2007. 11. 5. 21:00
 

1. Closure
남들 다 아는 이야기 써놓으려니깐 민망하구만.

몇달전에 closure가 뭔지도 모른 상태에서 closure로 고생한적이 있다.
여러개의 element에 대한 event handler 를 inner function으로 처리하는 코드였다.

function addEventHandler(){
    var actionValue = 0;
    for( i = 0; element.length > i ; i++ ) {
        element[i].onclick = handler;
        actionValue++;
    }
    function handler(){
        alert( element[i].value );
    }
}
이딴 코드였는데 잘 돌아갔을리 만무하다.

Javascript나 python, ruby등의 script language에는 closure라는 것이 존재한다.
무엇이든지 예를 보여주면 이해가 빠른법. 예를 하나 보자.
function foo( str ){
     var name = str;
     function tellName(){
         alert( name );
     }
     return tellName;
}
var runner = foo( "Cooooool" );
runner();       // "Cooooool" 이 나타남
tellName 일 실행될때 foo의 실행 영역이 되살아난다고 보면 된다. 논리대로라면 foo의 실행이 끝나면 foo 내의 context는 소멸되어야 한다. 하지만 tellName내에서 참조하고 있는 name은 어떻게 되는가? 놀랍게도(아 물론 놀랍지 않은 사람이 대부분일 것이다. 그러나 극적인 효과를 위해 놀라도록 하자.)  참조하는데 아무런 문제가 없다. 몇가지의 테스트를 해보면 tellName의 내에서의 name값이 copy by value 가 아니라는 사실도 알 수 있다.
function foo(){
    var number = 666;
    function say667(){
          alert( number );
    }
    number++;
    return say667;
}
var runner = foo();
runner();
그래 신기하고 좋다.
그런데 얼마나 효용성이 있는가?
적어도 inner function은 로직의 복잡성을 감소시키는데 도움을 준다고 볼 수 있다. 사실 이건 멍청하게 이야기한거고 Jim Ley가 closure에 정리해 놓은 자료 및 예제 를 보니 쓸만한 exapmle이 몇개 있다. 그 중의 하나는 model+view+controller로 wrapping된 Dhtml 객체에서의 이벤트 처리를 세련되게(복잡하면 세련되 보인다.) 표현한 부분이다. 나는 dom element에 Dhtml 객체의 참조를 첨가 해줌으로 해결했고 Ajax in action 의 저자도 그렇게 처리했길래 나쁘지 않은가보다 했지만 영 찜찜하긴 했다. 이렇게 closure로 할 수도 있구만.
정리하는 마음으로 다시 써봐야지

function associateObjEvent( obj , methodName ) {
    return ( function(e) {
        return obj[methodName](e, this);        
    }
}

// 객체
var DhtmlClass = function(){
    this.domEl = document.creaetElement("div");
    this.model = { // model };
    this.domEl.onclick = associateObjEvent(this, "doOnclick" );
}
DhtmlClass.prorotype.doOnclick = function(event, element) { .... }

var obj1 = new DhtmlClass();
var obj2 = new DhtmlClass();
호오 다시 써놓고 보니 확장성도 좋고 그냥 때웠던 방법보단 좋다. 왜 좋은지는 쓰지 않겠다. 요즘 남들이 다 이해할 수 있게 설명하는데에 큰 압박을 받다보니.....
다만 memory 문제는 좀 생각을 해야 될 것 같고(실제로 IE6에서는 memory leak이 있다.) 좀 고민해서 써야겠구만.

Trackbacks 0 : Comments 1
  1. BlogIcon nike 2013.07.12 07:54 Modify/Delete Reply

    당신 매력있어, 자기가 얼마나 매력있는지 모르는게 당신매력이야

Write a comment