자바스크립트의 this는 개발자 의도대로 바인딩되지 않습니다.

무슨 말일까요? 다음 함수가 있다고 해보죠.

function foo() {

this.bar = function () {

console.log(this);

}

}

a = new foo();

a.bar(); // foo

위 함수를 생성자 삼아서 a라는 인스턴스를 만들었고 이 때 a의 key-value에 bar의 정의가 들어갑니다. 그래서 a.bar()는 a.bar.apply( a, [] );과 같게 되어 this의 결과로 foo가 나옵니다. 이것은 컨텍스트 a를 this에 바인딩되기 때문에 가능한 것입니다. 이것이 일반적으로 개발자가 의도 또는 생각하는 this 바인딩입니다.

하지만 저 a.bar 함수를 다음과 같처럼 코딩하면 결과는 참혹합니다.

var bar = a.bar;

bar(); // window 이것은 window.bar.apply( null, [] )과 같다.

결코 기대한 결과는 아닐 겁니다. 개발자가 a.bar 함수를 사용하도록 만들었는데... 사용방법에 따라 함수 내에 this는 어떤 경우는 foo, 어떤 경우는 window와 바인딩 되어 버립니다. 결국 foo 생성자를 만든 개발자의 의도대로 사용되어지지 않습니다. 그래서 자바스크립트에서 this를 사용할 때는 반드시 주의 깊게 사용해야 합니다. 아니면 여러 기법 및 코딩규칙 등을 동원하여 오용의 소지를 막아야 할 것입니다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/815)