this와 호출 오브젝트

this 와 Object

객체가 구조적(계층적)으로 연결된 형태에서 함수를 호출했을 때 this가 참조하는 객체를  좀 더 구체적으로 살펴보도록 하자.

다음의 코드를 살펴보자.

JavaScript

var cody = {
    foo: 123,
    bar: {
        foo: 456,
        func: function() {
            console.log(this === cody.bar) // true
            console.log(this.foo) // 456          
        }
    }
};

cody.bar.func();

계층적인 객체에서 func를 호출하면 cody.bar.func()를 호출한다.

여기서 cody는 네임스페이스 역할을 하며 func앞에 작성한 bar객체를 this가 참조하게 된다.

즉, 함수를 호출할 때는 함수 바로 앞에 작성한 객체를 this가 참조하는 것이다. (쩜 바로 앞이라고 생각해도 무방 ㅎ)

이 점을 기억하면서 다음의 코드를 좀 더 살펴보도록 하자.

JavaScript

var cody = {
    foo: 123,
    bar: function() {
        console.log(this === cody); // false
        console.log(this === window); // true
        console.log(this.foo); // undefined     
    }
};

// cody.bar를 변수에 할당
var callFn = cody.bar;

// callFn()형태로 함수를 호출
callFn();

첫번째 코드와 다른 점은 함수를 바로 호출(실행)하지 않고 변수에 cody.bar 함수를 참조시킨 후에 callFn()을 호출한 형태이다. 

이 코드의 의미는 callFn()형태가 객체를 지정하지 않고 함수를 호출한 것이기 때문에 실행 컨텍스트의 this 바인딩이 글로벌 객체가 설정되면서 this가 이를 참조하게 되는 것이다.

다시 말해서, this가 글로벌 객체를 참조하는 것은 callFn() 형태로 함수를 호출할 때 함수 앞에 객체를 작성하지 않았기 때문이다.

다시 한번 강조하지만 함수를 호출할 때 함수 앞에 작성한 오브젝트를 this가 참조한다는 것을 기억하자.

Jaehee's WebClub