this 바인딩

this

자바스크립트에서 this는

1. 메서드에서 호출되는 경우, 해당 메서드를 호출한 객체에 바인딩됨.

2. 함수에서 호출되는 경우, 전역객체에 바인딩됨(js에선 window)

2의 경우가 문제인데, 만약 메서드 내에 함수를 정의하는 경우 해당 함수의 this는 메서드가 있는 객체에 바인딩되는게 아니라 전역객체에 바인딩 된다.

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

위의 결과는 

func1() called. this.value: 2

func2() called. this.value: 101

func3() called. this.value: 102

와 같이 나타난다. this.value가 2, 3, 4로 나오는게 자연스럽지만 func1의 this는 myObject에 바인딩되고, 내부함수인 func2, 3은 myObject가 아닌 window에 바인딩되기 때문이다. 따라서 객체 밖의 변수 value에 접근하는 것이다.

따라서 이런 객체의 메서드의 내부함수에서 객체에 접근하려면 this를 따로 참조할 수 있게 해줘야 한다.

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

위의 결과는

func1() called. that.value: 2

func2() called. that.value: 3

func3() called. that.value: 4

와 같이 나타난다. 원하는 결과를 보여준다.