티스토리 뷰

자바스크립트로 심각한 코딩을 하기 시작하던 초기에 했던 삽질이다. 그 전까진 아예 "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에는 없다).

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

댓글
  • 프로필사진 Favicon of http://blog.sangpire.pe.kr BlogIcon sangpire 함수 위치 보다는 누가 함수를 *소유*하고 있는지가 중요한거 아닌가요? 저도 요기(http://www.quirksmode.org/js/this.html)서 참고^^; .. 그냥 제가 얼마전에 공부한 거라.. 2009.12.10 16:14
  • 프로필사진 Favicon of https://iolothebard.tistory.com BlogIcon Ho Eyo He Hum! iolo 흠... 그 페이지는 나도 보긴했는데... 소유? 어떤 의미일까나...
    위치라고 한건 호출 문맥(invocation context)를 쉽게 쓴다고 쓴건데... 찜찜해... 좀 더 정리해보자^^
    2009.12.10 17:19 신고
댓글쓰기 폼