JavaScript Common Mistakes(2) - This "this" is not the "this"

자바스크립트로 심각한 코딩을 하기 시작하던 초기에 했던 삽질이다. 그 전까진 아예 "this"라는 키워드를 쓸 일 자체가 없었다.

가장 간단한 예제를 보자:

function test(name, button) {

  this.name = name;

  button.onclick = function(event) {

    alert('hello, ' + this.name);

  };

}

문제는, 이 코드에서 아래에 있는(4줄) "this"가 위에 있는(줄2) 그 "this"가 아니라는 건데...

그럼 어떻게 해야하나? 여러가지 방법이 있겠지만, 가장 일반 적인 방법은 이렇게 하는 거다:

function test(name, button) {

  this.name = name;

  var self = this;

  button.onclick = function(event) {

    alert('hello, ' + self.name);

  };

}

변수 이름은 self가 아니어도 상관없지만, 일반적으로 self, me, this_, _this 등을 많이 쓴다.

이론에 근거한 체계적인 설명은 크록포드옹께서 쓰신 JavaScript: The Good Parts 를 정독하시고...

이것만 기억하자:

자바스크립트의 this는 함수가 "선언된 위치"가 아니라, 함수가 "호출 문맥(invocation context)호출된 위치"에 따라 결정된다.

위의 코드에서, 사용자가 버튼을 누르면 button.onclick에 연결된 콜백 함수를 호출하는데, 그 시점의 this는 함수가 선언된 위치인 test 객체가 아니라, 콜백 함수를 호출하는 "버튼"(DOM 노드)이다. 그래서 엉뚱한 값(버튼 태그의 name 속성 값)이 출력되는 것이다.

더 헷갈리다고...? Orz

대부분의 this와 관련된 문제는 위에서 설명한 꼼수와 자바스크립트의 Function.prototype.apply() 와 Function.prorotype.call() 를 통해 해결할 수 있다. prototype.js 의 Function.bind() 와 dojo 의 dojo.hitch() 도 결국은 같은 일을 한다(그래서 jQuery에는 없다).

흠냐... 아직 많이 남았는데... 벌써... 귀차니즘 발동... -,.-;;;