함수를 호출할 때 this 바인딩

함수를 호출하면, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩된다. 브라우저에서 전역객체는 window 객체가 된다.

자바스크립트의 모든 전역변수는 실제로는 이러한 전역 객체의 프로퍼티들이다.

var foo = 'I'm foo';

console.log(foo);           // I'm foo
console.log(window.foo);    // I'm foo

함수 호출에서의 this 바인딩 특성은 내부 함수를 호출했을 경우에도 그대로 적용되므로, 내부 함수에서 this를 이용할 때는 주의해야 한다. 내부 함수도 결국 함수이므로 이를 호출할 때는 함수 호출로 취급된다. 따라서 내부 함수의 this는 전역 객체(window)에 바인딩된다. 때문에 의도하지 않은 결과가 나타날 수 있다.

이렇게 내부 함수가 this를 참조하는 자바스크립트의 한계를 극복하려면 부모 함수의 this를 내부 함수가 접근 가능한 다른 변수에 저장하는 방법이 필요하다.

var value = 100;

var myObject = {
    value: 1,
    func1: function(){
        var that = this;
        this.value += 1;
        console.log('func1() called. this.value : ' + this.value);

        func2 = function(){
            that.value += 1;
            console.log('func2() called. this.value : ' + that.value);
        }
        func2();        // func2() called. this.value : 3
    }
};

myObject.func1();       // func1() called. this.value : 2