[JavaScript] this 심화 탐구

요약

엄격 모드

- 엄격 모드를 사용할 경우 globalThis는 undefined를 가리킨다.

 

함수 선언문

- 함수 선언문에서의 this는 전역 객체를 가리킨다. 단 객체의 메서드가 함수 선언문으로 작성된 경우 this는 해당 객체를 가리킨다.

 

화살표 함수

- 화살표 함수는 this 바인딩이 존재하지 않는다.
- 화살표 함수에서 사용하는 this는 화살표 함수가 정의된(코드의 위치) 스코프의 this를 캡처한다.
- 이 말을 다시 말하면, 화살표 함수에서 사용하는 this는 화살표 함수의 상위 스코프의 this를 가리킨다. 

 

- 객체의 메서드가 화살표 함수로 선언된 경우, this는 객체가 정의된 위치의 상위 스코프를 가리킨다. 여기서 상위 스코프는 객체 자신이 아닌 객체가 정의되어 있는 스코프를 말한다.
- 스코프와 객체를 구분해서 이해할 필요가 있다.

 

중요!

객체 리터럴(obj) 자체는 this 바인딩을 만들어내지 않는다.

 

화살표 함수에서의 this 바인딩

화살표 함수는 this 바인딩이 존재하지 않는다.

화살표 함수 내에서 사용하는 this는 정의되는 시점에 화살표 함수의 상위 스코프 this를 캡처한다.

const obj = {
    getThis: () => {
        return this;
    }
}

console.log(obj.getThis()); // module.exports

 

위 obj의 getThis 메서드는 화살표 함수로 정의되었고 this를 반환한다.
getThis 메서드가 정의되는 시점은 obj 객체가 생성되는 시점이다.
그 시점의 상위 스코프는 전역/모듈 스코프이다.
따라서 getThis 메서드로 반환되는 this는 전역/모듈 스코프인 module.exports가 반환된다.

 

함수 선언문의 this 바인딩

함수 선언문에서의 this는 global 객체를 가리킨다.

function foo() {
  return this;
}

console.log(foo()); // global

 

단 엄격 모드(strict mode)의 함수 선언문 this 바인딩은 undefined 이다.

"use strcit";

function foo() {
  return this;
}

console.log(foo()); // undefined

 

함수 선언문 내 화살표 함수의 this 결정

function foo() {
    const obj = {
        getThis: () => {
            return this;
        }
    }

    console.log(obj.getThis());
}

foo(); // global 객체

 

위 foo 함수에 정의된 obj 객체의 getThis 메서드는 this를 반환한다.
obj 객체의 getThis가 정의되는 시점은 foo 함수가 호출되는 시점이다.
foo 함수의 this 바인딩은 global 객체이다.
obj.getThis에서 반환하는 this는 정의 시점 상위 스코프의(foo)의 this를 캡처한다.
따라서 foo 함수의 실행 결과 obj.getThis()에서 반환되는 this는 global 객체이다.

 

블록 스코프 내 화살표 함수의 this

아래 코드를 보고 foo 함수 내부의 obj.getThis 메서드가 반환할 this를 예측해보자.

function foo() {
    const obj = {
        getThis: () => {
            return this;
        }
    }

    console.log(obj.getThis());
}


{
    foo(); // global 객체
}

 

getThis 메서드로 반환되는 this는 global 객체이다.
Block 스코프는 스코프만 형성할 뿐 this 바인딩에는 영향을 주지 않는다.
따라서 foo함수가 실행되는 시점의 this는 global 객체이며 getThis 메서드가 생성되는 시점의 this는 상위 스코프의 this인 global이 캡처된다.

 

중첩된 화살표 함수에서의 this 바인딩

마지막으로 아래 코드를 예측해보자.

function foo() {
  const boo = () => {
    const hoo = () => {
      return this;
    };

    return hoo();
  };

  return boo();
}

console.log(foo()); // global

 

foo 함수는 함수 선언문으로 작성이 됐고, foo 함수 내부의 boo 함수는 화살표 함수로 작성이 됐다.
boo 함수 내부에는 hoo 함수가 화살표 함수로 작성이 되었고, this를 반환한다.
boo 함수는 hoo 함수를 호출해 반환하고, foo 함수는 boo 함수를 호출해 반환한다.

 

이때 hoo 함수의 this는 foo 함수의 this를 캡쳐하고 있다.
foo 함수의 this는 global 객체이다.
boo 함수는 화살표 함수로 상위 스코프의 this를 캡처한다. 이때 상위 스코프인 foo 함수 스코프의 this는 global이다.
hoo 함수는 화살표 함수로 상위 스코프의 this를 캡처한다. 이때 상위 스코프인 boo 함수의 this는 foo 함수의 this를 캡처했기에 global 이다.

 

따라서 hoo 함수의 this는 global 객체를 캡처하고 이를 반환한다.

 

마치며

JavaScript의 this는 정말 다양한 케이스에서 다르게 결정된다.

함수 선언문, 화살표 함수, 객체 클래스의 this 결정, 블록 스코프에서의 this, call apply 등 함수의 prototype 메서드에 의한 명시적 this 바인딩 등.. 이해해야 할 범위가 정말 넓다.

 

this 바인딩이 어떻게 결정되는지는 단순히 this에 대해서만 생각해서는 이해할 수 없다.

실행 컨텍스트, 함수 선언문과 화살표 함수의 차이, JavaScript라는 언어 자체를 이해해야 조금은 이해가 된다.

 

이번 this 바인딩이 조금 어렵게 느껴졌다면 아래 두 글을 읽고 다시 한번 읽어보면 조금은 이해가 될수도..

 

[JavaScript] this 바인딩

[JavaScript] 실행 컨텍스트

[JavaScript] this 바인딩