중첩된 함수의 this는 글로벌 객체(브라우저에서는 window)를 참조한다

중첩 함수의 this

this 키워드에 대한 기본적인 사용법에 대해서 앞서 알아보았습니다.

그렇다면 함수 내에 있는 함수에서는 this값이 어떻게 참조될까?

다음 코드에서 func2과 func3의 this는 obj객체가 아닌 글로벌 객체를 참조한다.

아래 코드를 살펴보도록 하자.

JavaScript

var obj = {
    func1 : function(){
        console.log(this); // obj가 기록된다
        // 중첩된 내부 함수정의
        var func2 = function() {
            console.log(this); // window 가 기록되며, 여기서부터는 this의 값이 계속 window이다.
            // 중첩된 함수를 또 정의
            var func3 = function() {
                console.log(this); // window 가 기록
            }();
        }();
    }
};

obj.func1();

이렇게 중첩된 함수에서의 this는 함수를 포함한 객체, 호출된 컨텍스트에 따르는 것이 아니라 글로벌 객체를 참조하게 된다.

그렇다면 부모함수의 this에 대한 참조를 유지할 수는 없는 것일까?

중첩된 함수 문제는 스코프 체인을 사용해 부모함수의 this에 대한 참조를 저장해 두면 this의 값이 사라지는 것을 막을 수가 있다.

다음 코드는 that 변수와 이 변수의 스코프를 사용해 함수 컨텍스트가 변하는 와중에도 this 값을 유지하고 있다.

JavaScript

var obj = {
    prop : 'jaehee',
    func1 : function(){
        var that = this; // this에 대한 참조인 obj를 func1 함수 스코프에 저장해 둔다.
        // 중첩된 내부 함수정의
        var func2 = function() {
            // that(=this)의 스코프 체인을 통해 'jaehee'를 기록한다.
            console.log(that.prop);
            // 중첩된 함수를 또 정의
            var func3 = function() {
                console.log(that); // obj 를 참조한다.
                console.log(this); // window 가 기록
            }();
        }();
    }
};

obj.func1();

Jaehee's WebClub