JavaScript this 바인딩의 모든 것

this 키워드가 결정되는 4가지 규칙을 인터랙티브하게 학습합니다

this 바인딩 규칙

독립 함수 호출 시 this는 전역 객체(strict mode에서는 undefined)

코드 예제

function showThis() {
  console.log(this);
}

showThis(); // 독립 함수 호출

// strict mode
"use strict";
function strictShowThis() {
  console.log(this);
}
strictShowThis();

실행 결과

// 일반 모드: window (브라우저) 또는 global (Node.js)
// strict 모드: undefined

this 값 추적기

현재 this 값

undefined

설명

독립적으로 호출된 함수의 this는 기본적으로 전역 객체를 가리킵니다. strict mode에서는 undefined가 됩니다.

this 결정 플로우차트 (인터랙티브)

함수가 화살표 함수인가?

실전 퀴즈

문제 1

const obj = {
  name: "Test",
  method: function() {
    setTimeout(function() {
      console.log(this.name);
    }, 100);
  }
};
obj.method(); // 출력 결과는?

정답 보기

undefined - setTimeout의 콜백 함수는 나중에 독립적으로 호출되므로 기본 바인딩이 적용됩니다.

문제 2

const obj = {
  name: "Test",
  method: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  }
};
obj.method(); // 출력 결과는?

정답 보기

"Test" - 화살표 함수는 렉시컬 this를 사용하므로 method의 this(obj)를 그대로 사용합니다.

this 바인딩 우선순위

특별

화살표 함수

렉시컬 바인딩 (변경 불가)

new 바인딩

가장 높은 우선순위

명시적 바인딩

call, apply, bind

암시적 바인딩

객체 메서드 호출

기본 바인딩

가장 낮은 우선순위

🧑‍💻

1nnovator 김민성

JavaScript 학습 센터 개발자

기술 블로그•Interactive JavaScript Learning Platform

🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!

🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.