실행 컨텍스트 with this - 2

실행 컨텍스트의 구성

앞선 1탄 포스팅에서 세 가지의 환경 정보가 담긴다고 했었죠. 그 중 ThisBinding에서 할당되는 this대해 포스팅해보겠습니다.

• VariableEnvironment
• LexicalEnvironment
• ThisBinding

여기서 ThisBinding은 실행컨텍스트가 활성화 될 때 this를 바인딩합니다. 즉 함수가 호출될 때 결정되는겁니다. 이때 어떤식으로 누가 호출하냐에 따라 동적으로 바뀌게 됩니다.

this는 어떤 것을 가리킬까?

전역에서의 호출

전역 공간에서의 호출, 그리고 일반적인 함수 호출시에 this는 전역객체를 가리킵니다. 브라우저상에서 전역객체는 window, nodejs상에서는 global 객체입니다.

function test() {
    console.log(this) // window
}
console.log(this) // window

메서드의 호출

함수 중에서 메서드의 경우는 메서드를 호출한 주체가 this가 됩니다. 여기서 메서드란 어떠한 객체와 관련된 동작을 하는 함수를 바로 메서드라고 합니다. (oop 개념과 혼동 될 수 있습니다.)

var temp = {
    log: function() {
        console.log(this);
    }
}
temp.log()

여기서 어떤한 객체 temp가 log()라는 메서드를 호출하였기 때문에. 여기서의 this는 바로 temp가 되는 것입니다.

어떠한 객체안에 메서드와 함수의 호출

어떠한 객체안에 메소드와 그 메소드 안에 함수가 있는 경우 그 함수를 호출했을 때에 this는 어이없게도 전역객체입니다. 말이 조금 어려운데 코드로 보겠습니다.

var temp = 10;
var obj = {
    temp: 20,
    log: function() {
        console.log(this.temp)

        function() innerLog() [
            console.log(this.temp)
        }

        innerlog() // 10
    }
}
obj.log() // 20

obj.log()의 경우는 obj안에 메소드를 실행하였고 그 주체가 obj이니까 this는 obj가 됩니다. 그래서 로그 호출 시에 20이 찍히게 됩니다. 하지만 메소드안에 있는innerlog()는 함수를 호출한 주체가 전역이다보니 10이 호출되게 됩니다.

Callback 함수의 호출

콜백 함수를 어떤한 객체의 메소드의 파라메타로 넘겨 줬을 시의 경우입니다.

var callback = function() {
    console.log(this)
};
var obj = {
    log: functiong(cb) {
        cb()
    }
}

obj.b(callback) // window

이 경우에 어떠한 객체의 메소드로 호출 했음에도 전역객체를 가리키고 있습니다. 이는 앞서 포스팅 맨 처음 this는 함수를 실행한 주체가 누구냐에 따라 달라진다고 했습니다. cb()라는 콜백 함수 실행문을 보면 어떠한 객체도 참조되어 지지 않고 실행하고 있습니다. 그래서 window를 가리키게 되는 것입니다.

정리

함수 실행 시 기본적으로 this는 전역객체이다. 하지만 어떠한 객체의 메소드라면 그 객체가 this이다. 즉 어떤식으로 누가 호출하냐에 따라 동적으로 바뀌게 됩니다. 추가적으로 ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다