[작성중][TIL] this 바인딩 문제 풀기

🚧 문서 업데이트 중입니다
TODO:

• 콜백 함수의 this
• 생성자 함수의 this
• 화살표 함수의 this

문제집

Q1. 다음 코드의 출력 결과는?

const judoTeam = {
  nationality: 'South Korea',
  slogan: 'gentle way',
  members: {
    An: {
      nickname: 'cold-blooded',
      introduce: function () {
        console.log(`I am ${this.nickname} in ${this.nationality}!`);
      },
    },
  },
};

judoTeam.members.An.introduce();

A1. 답변:

I am cold-blooded in undefined!

E1. 해설:

단계별 분석:

• 화살표 함수인가 일반 함수인가?
  • function 키워드로 선언되었으므로 일반 함수이다.
  • 일반 함수의 this 바인딩은 함수 호출 방식에 의해 결정된다.
• 함수 호출 방식이 메서드로서 호출되었는가?
  • judoTeam.members.An.introduce()와 같이 judoTeam.members.An 객체의 메서드로 호출 되었다.
  • 메서드로 호출되면 해당 메서드를 지닌 객체(An)에 this가 바인딩된다.

this가 바인딩하는 객체:

{ // 전체 블록
  nickname: 'cold-blooded',
  introduce: function () {
    console.log(`I am ${this.nickname} in ${this.nationality}!`);
  }
}

즉 이 객체(this)에는 프로퍼티(property)에 nickname은 cold-blooded로 존재하지만 nationality는 존재하지 않으므로 결과적으로 I am cold-blooded in undefined!가 출력된다.

Q2. 아래 코드에서 nationality를 'South Korea'로 출력하려면 어떻게 하면 되는가?

const judoTeam = {
  nationality: 'South Korea',
  slogan: 'gentle way',
  members: {
    An: {
      nickname: 'cold-blooded',
      introduce: function () {
        console.log(`I am ${this.nickname} in ${this.nationality}!`);
      },
    },
  },
};

judoTeam.members.An.introduce();
// expected: I am cold-blooded in South Korea!
// actual: I am cold-blooded in undefined!

A2. 답변:

const judoTeam = {
  nationality: 'South Korea',
  slogan: 'gentle way',
  members: {
    An: {
      nickname: 'cold-blooded',
      introduce: function () {
        console.log(`I am ${this.nickname} in ${judoTeam.nationality}!`);
      },
    },
  },
};

judoTeam.members.An.introduce();
// I am cold-blooded in South Korea!

E2. 해설:

단계별 분석:

• nationality 프로퍼티에 직접 접근하고 싶다
• nationality 프로퍼티를 직접 접근하려면 변수 judoTeam으로 접근하면 된다
• judoTeam.nationality로 접근한다

기술적으로 가능한 이유:

• 실행 컨텍스트 개념이 기술적으로 깔려 있다.
• introduce 메서드를 실행하면 해당 익명 함수function ()를 실행하는 컨텍스트에서 Enviroment Record(이하 ER)를 수집한다. ER에는 함수 실행에 필요한 모든 식별자 정보를 담긴다.
• 그런데 이 익명 함수 안에는 judoTeam이라는 변수가 존재하지 않는다.
• 즉 해당 함수의 ER에 식별자가 존재하지 않으므로 outerEnviromentReference(이하 outerER)를 참조하게 된다. 이를 스코프 체이닝(scope chaining)이라고 한다.
• introduce 메서드의 outerER, 즉 상위 스코프는 전역 스코프가 된다. 전역 스코프에는 const로 선언된 judoTeam 변수가 존재한다.
• 따라서 전역 스코프에 있는 judoTeam의 nationality 프로퍼티에 접근할 수 있다.

회고

TIL을 작성하면서 느낀 점을 작성합니다.

See also