자바스크립트 this에 대한 오해와 진실(The this keyword of javascript)

기존에 내가 알고 있던 this 에 대한 이해 - 모든 메소드는 메소드를 실행하는 객체를 this로 가르킨다.

이건 오해였다. 그런가?..

실제로 동작하는건 다음과 같았다. 우선 alertName 이라는 함수를 생각해 보자.

var Babo = function() {
  this.name = "바보";
};
Babo.prototype.alertName = function() {
  alert(this.name);
};

var babo = new Babo();
babo.alertName();

alertName은 위와 같이 단순히 this의 name 속성을 화면에 띄워주는 역할을 한다.

위의 예제를 실행하며, "바보"가 출력될 것이다.

다음과 같이 버튼의 onclick 이벤트에 함수를 할당 해주면,

<button id="button1" name="버툰">Who am I</button>
<script type="text/javascript">
  var button1 = document.getElementById("button1");
  button1.onclick = babo.alertName;
</script>

그리고 버튼을 클릭(Click) 하게 된다면, 무엇이 표시될까?

바로 "버툰" 이라는거..

그럼 다음의 경우는?

var NewBabo = function() {
   this.name = "신바보";
};

NewBabo.prototype.alertName = function() {
   babo.alertName();
};

var newBabo = new NewBabo();
newBabo.alertName();

이 경우는 무엇이 출력될까?.. "신바보" 또는 "바보"?

정답은 "바보" 다. 함수를 호출 할 때, 함수 안에서 this는 그 함수를 소유하고 있는 객체를 가르키게 되는 것이다. 위의 경우 babo.alertName()은 alertName() 이 여전히 babo의 것이기 때문에 "바보"가 출력되는 것이다. 그럼 위의 onclick의 경우는 왜? "버툰"이 출력 되는 것일까?

이건, button1의 onclick 이벤트에 babo의 alertName 함수를 복사해 놓았기 때문이다. 이제 onclick은 babo의 alertName과 동일한 일을 하게 되는 것이고, onclick의 소유주는 button1 이기 때문에, button1의 이름인 "버툰"이 출력되는 것이다.

즉, 결론은 모든 메소드는 메소드의 주인(Owner)을 this로 가르킨다. 단 이때 메소드를 복사(주인 교체)한 경우와 메소드를 참조(주인 불변)인 경우를 주의하자!!!

보다 명쾌한 해설은 참고 링크를 읽어보자~~!!

결론

In Javascript 'this' always refers to the "owner" of the function we're executing. or rather(더 정확하게 말하자면), to the object that a function is a method of. - ppk

참고 자료

• http://www.quirksmode.org/js/this.html - 매우 이해하기 쉬운 정리

이 글은 스프링노트에서 작성되었다가 뭐가 마음에 안들어 HTML을 직접 수정 하였습니다.