---
id: this-binding
title: "This Binding"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["this 바인딩", "JS this", "JavaScript this", "디스 바인딩"]
duplicate_of: ""
source_trust_level: "A"
confidence_score: 0.90
created_at: 2026-07-11
updated_at: 2026-07-11
review_reason: ""
merge_history: []
tags: ["research", "context 이해 규칙"]
raw_sources: ["Execution Context 실행 컨텍스트를 알아야하는 이유? - 넥스트리"]
applied_in: []
github_commit: ""
---

# [[This Binding]]

## 🎯 한 줄 통찰 (One-line insight)
`this` 바인딩은 함수의 선언 위치(Lexical Scope)가 아닌, 오직 함수가 '어디서 어떻게 호출되느냐'에 따라 가리키는 객체가 동적으로 결정되는 식별자 연결 메커니즘이다.

## 🧠 핵심 개념 (Core concepts)
- [[기본 바인딩 (Default Binding)]]
- [[암시적 바인딩 (Implicit Binding)]]
- [[명시적 바인딩 (Explicit Binding)]]
- [[new 바인딩 (New Binding)]]

## 🧩 추출된 패턴 (Extracted patterns)
- **우선순위 패턴**: 자바스크립트 엔진은 `this`가 가리키는 객체를 결정할 때 `new 바인딩 > 명시적 바인딩 > 암시적 바인딩 > 기본 바인딩` 순으로 적용한다.
- **화살표 함수 상속 패턴**: 화살표 함수는 독립적인 `this`를 생성하지 않고, 어휘적으로 정의된 주변 상위 스코프(Lexical Scope)의 `this`를 그대로 상속받아 사용한다.

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
| 항목 (Option) | 장점 | 단점 | 언제 선택 |
|---|---|---|---|
| **기본 바인딩** | 별도의 지정 없이 전역 객체에 자동 접근 가능 | 'strict mode' 환경에서는 `undefined`가 되어 오류 발생 가능 | 일반적인 함수 호출 방식을 사용할 때 |
| **암시적 바인딩** | 객체의 메서드로서 호출한 객체를 자연스럽게 참조 가능 | 함수 참조가 분리되거나 콜백으로 전달될 시 의도치 않은 바인딩 소실 발생 | 특정 객체에 속한 메서드를 실행할 때 |
| **명시적 바인딩** | `call`, `apply`, `bind`를 통해 원하는 객체로 `this`를 강제로 고정 | 코드가 길어질 수 있으며 수동 제어가 필요함 | 특정 객체의 컨텍스트 환경에서 함수를 명시적으로 실행해야 할 때 |
| **new 바인딩** | 생성자 함수 호출 시 새로 생성된 인스턴스로 `this`가 자동 연결 | `new` 키워드를 누락할 경우 전역 객체 오염 위험 | 새로운 객체(인스턴스)를 생성할 때 |

## 📖 세부 내용 (Details)
- **바인딩의 정의**: 프로그래밍에서 바인딩은 식별자(변수, 함수 이름 등)를 그들이 대표하는 값(메모리 주소)과 연결하는 과정을 뜻한다. 특히 `this` 바인딩은 `this`라는 식별자와 그것이 가리키는 특정 객체를 연결하는 것을 의미한다 [S1].
- **Lexical Scope와의 차이점**: 함수의 렉시컬 스코프(Lexical Scope)는 함수가 코드로 작성되고 정의된 위치에 따라 결정된다. 하지만 `this` 바인딩은 선언된 위치와는 전혀 무관하게, 런타임에 함수가 **어디서 어떻게 호출되었느냐**에 따라 동적으로 달라진다 [S1].
- **4가지 함수 호출 방식과 바인딩 규칙** [S1]:
  1. **일반 함수 호출 (기본 바인딩)**: 가장 기본적인 방식으로, `this`는 전역 객체(브라우저의 `window`, Node.js의 `global`)를 가리킨다. 단, 자바스크립트의 'strict mode'가 활성화된 상태에서는 전역 객체 대신 `undefined`로 설정된다.
  2. **메서드 호출 (암시적 바인딩)**: 객체의 내장 메서드로서 함수가 호출될 때 적용되며, `this`는 해당 메서드를 호출한 바로 그 객체를 가리킨다 (예: `obj.method()`에서 `this`는 `obj`에 바인딩).
  3. **간접 호출 (명시적 바인딩)**: `Function.prototype.apply`, `call`, `bind` 메서드를 이용하는 방식이다. 개발자가 `this`를 바인딩할 객체를 직접 명시적으로 지정하며, 지정된 객체로 `this`가 고정된다.
  4. **생성자 함수 호출 (new 바인딩)**: `new` 키워드와 함께 함수를 생성자로 호출하면, `this`는 해당 과정을 통해 새롭게 생성된 인스턴스(객체)를 가리킨다.

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- 자바스크립트 환경 모드에 따른 모순적 결과: 일반 함수 호출 시 논-스트릭트 모드(non-strict mode)에서는 전역 객체를 가리키지만, 'strict mode'에서는 `undefined`가 되는 동작의 차이가 발생한다 [S1].

## 🛠️ 적용 사례 (Applied in summary)
현재 발견된 실제 적용 사례가 없습니다. 소스에 관련 정보(실제 적용된 코드 레포지토리, Git 커밋 해시 등)가 부족합니다.

## 💻 코드 패턴 (Code patterns)
소스에 코드 예시 없음. (소스 내에 `obj.method()` 형태가 텍스트로 언급되었으나 구체적이고 실행 가능한 전체 코드 스니펫은 제공되지 않음)

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** A
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 관련 문서 링크 (Related document links)

### 상위/유사 개념
- [[Execution Context]] — `this` 바인딩의 원리가 포함되어 있으며, 자바스크립트 엔진이 코드를 해석하고 실행하는 추상적인 환경 [S1].
- [[Lexical Scope]] — `this` 바인딩과 대조되는 개념으로, 함수의 호출 위치가 아닌 정의된 위치에 의해 스코프가 결정되는 규칙 [S1].

### 심층 후속 질문 (Deeper Research Questions)
- 화살표 함수가 자신의 `this`를 생성하지 않고 상위 렉시컬 스코프를 상속받는 메커니즘은 내부적으로 어떻게 작동하는가?
- 명시적 바인딩을 위한 `call`, `apply`, `bind` 메서드는 각각 어떤 상황에서 사용하는 것이 가장 적절한가?
- 'strict mode'에서 기본 바인딩이 `undefined`로 처리됨으로써 예방할 수 있는 실제 버그나 취약점 사례는 무엇인가?
- 자바스크립트 엔진은 런타임에 이 4가지 바인딩 우선순위를 어떻게 계산하고 판별하는가?
- 비동기 처리나 콜백 함수에서 `this`의 암시적 바인딩이 유실되는 문제를 해결하기 위한 베스트 프랙티스는 무엇인가?

### 실무 적용 맥락 (Practical Application Contexts)
- **Implementation:** React 등에서 클래스형 컴포넌트의 메서드를 이벤트 핸들러로 전달할 때 `bind`를 사용하거나 화살표 함수를 적용하여 `this` 참조가 유실되는 현상 방지.
- **System Design:** 자바스크립트의 객체 지향 프로그래밍 아키텍처 설계 시, 인스턴스의 상태 접근을 위해 올바른 `this` 컨텍스트가 유지되도록 디자인.
- **Operation / Maintenance:** `this`가 브라우저 전역 객체(`window`)를 가리키며 발생하는 전역 변수 오염 및 스코프 꼬임 버그 디버깅.
- **Learning Path:** 자바스크립트 엔진의 동작 원리(호이스팅, 스코프) 습득 후, 비동기(콜백, 프로미스) 개념을 이해하기 전 브릿지 지식으로 학습.

### 인접 주변 주제 (Adjacent Topics)
- [[Closure]] — `this` 바인딩과 함께 자바스크립트 실행 컨텍스트(Variable Environment, Lexical Environment)에서 관리되는 식별자 참조 기술.


## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[context 이해 규칙]]
- **관련 개념:** [[Execution Context]], [[Lexical Scope]]
- **참조 맥락:** 자바스크립트 환경에서 함수 호출 방식에 따라 동적으로 변하는 객체 참조 및 데이터 접근 문제를 디버깅하고 설계할 때 참조.

## 📚 출처 (Sources)
- [1] Execution Context 실행 컨텍스트를 알아야하는 이유? - 넥스트리 (https://www.nextree.io/404/)

## 📝 변경 이력 (Change history)
- 2026-07-11: Initial draft generated via Datacollector_MAC P-Reinforce engine.