| [[JavaScript| 관련 문서 | |||
| {{{#!wiki style="margin: 0 -10px -5px; min-height: calc(1.5em + 5px)" {{{#!folding [ 펼치기 · 접기 ] {{{#!wiki style="margin: -5px -1px -11px" | <colbgcolor=#f7df1e,#f7df1e><colcolor=#000,#000> 관련 문서 | 표준(TC39 · 브라우저 전쟁) · Vanilla JS · AJAX · JSFuck · 상태관리 라이브러리 · JSON | |
| 문법 | 표준 내장 객체, this · undefined | ||
| 구현체 | <bgcolor=#f7df1e,#f7df1e> 엔진 | V8 · SpiderMonkey · JavaScriptCore · 헤르메스 · Boa | |
| <bgcolor=#f7df1e,#f7df1e> 런타임 | Node.js · Deno · Bun · workerd | ||
| 패키지 관리자 | npm · Bun | ||
| 파생 언어 | TypeScript · CoffeeScript · 액션스크립트 · AssemblyScript · elm · ReasonML · ReScript | ||
| 관련 인물 | 브랜든 아이크 | ||
| 기타 | JavaScript npm 마비 사태 | }}}}}}}}} | |
| 프로그래밍 언어 문법 | |
| {{{#!folding [ 펼치기 · 접기 ] {{{#!wiki style="margin: 0 -10px -5px; word-break: keep-all" | 프로그래밍 언어 문법 C(포인터 · 구조체 · size_t) · C++(이름공간 · 클래스 · 특성 · 상수 표현식 · 람다 표현식 · 템플릿/제약조건/메타 프로그래밍) · C# · Java · Python(함수 · 모듈) · Kotlin · MATLAB · SQL · PHP · JavaScript(표준 내장 객체, this) · Haskell(모나드) · 숨 |
| 마크업 언어 문법 HTML · CSS | |
| 개념과 용어 함수(인라인 함수 · 고차 함수 · 콜백 함수 · 람다식) · 리터럴 · 문자열 · 식별자(예약어) · 상속 · 예외 · 조건문 · 반복문 · 비트 연산 · 참조에 의한 호출 · eval · 네임스페이스 · 호이스팅 | |
| 기타 #! · == · === · deprecated · GOTO · NaN · null · undefined · 배커스-나우르 표기법 | }}}}}} |
| 프로그래밍 언어 목록 · 분류 · 문법 · 예제 |
1. 개요
JavaScript에서 this는 해당 코드의 문맥(context)을 가리키는 키워드이다.반드시 인스턴스의 클래스 정의를 가리키는 타 언어의 this와 다르게, 프로토타입 기반 언어인 JavaScript에서 this의 값은 런타임시 함수 호출 방식에 따라 달라지는 등 난해한 면이 존재한다.
뒤에 후술할 this의 결정 상황들은 함수가 어떤 우선순위로 실행되는지에 따라 복잡하게 달라진다. 즉 코드상에선 this가 어떤 것이라고 생각했는데, 사실 이후 함수 호출에서 this가 다른 것으로 고정되었을 수 있다는 것이다.
코드 문맥인 this가 변화하는 단위는 기본적으로 함수라고 이해하면 된다. 일반적인 'function' 키워드로 선언된 함수는 호출된 문맥에 따라 this가 변화한다. 그러나 화살표 함수는 this가 코드상의 정적인 문맥으로 정해져있다. 즉 함수 호출에 따라서 this가 변화하지 않는다.
#!syntax javascript
const animalObj = {
name: "Dog",
sound: "Barkbark",
cry: function() { console.log(this.name + " cries " + this.sound) }
}
animalObj.cry() //Dog cries Barkbark
2. 가능한 this의 경우
2.1. 전역 컨텍스트
#!syntax javascript
function func() {
return this;
}
func(); // window or global
아무런 문맥이 없는 상태에서의 this는 전역 컨텍스트를 가리킨다.
여기서의 전역 컨텍스트는 자바스크립트 실행 환경이 브라우저일 시에 'window', Node일 시에 'global'이다.
2.1.1. 엄격 모드의 차이
엄격 모드의 경우, 아무런 문맥이 없는 상황에서 this 값이 undefined가 된다.2.2. 명시적 this 바인딩
#!syntax javascript
function f1() {
return this.foo;
}
var f2 = f1.bind({ foo: "bar" });
console.log(f2()); // bar
일반 함수의 this가 문맥에 따라 변화하지 않도록 하려면, 해당 함수의 bind() 매서드를 호출하고[1], 반환된 함수를 사용하면 된다. 반환된 함수는 this가 정해진 값으로 고정된 새로운 함수다.
다만 화살표 함수는 정적으로 문맥이 정해지므로, bind()를 호출해도 this가 변하지 않는다.
2.3. 이벤트 처리 함수
#!syntax javascript
function onClick() {
console.log(this); // DOM 요소
}
element.addEventListener("click", onClick);
// or
element.onclick = onClick;
addEventListener에 추가했거나 DOM 객체의 이벤트 함수로 설정한 경우, this는 이벤트를 발생시킨 DOM 요소를 가리킨다.
2.4. 생성자 함수: new 바인딩
#!syntax javascript
function Obj() {
this.foo = "bar";
}
var o = new Obj();
console.log(o.foo); // bar
함수를 'new' 키워드와 함께 생성자 함수로 호출했을 경우, this는 생성하여 반환하려는 객체를 나타낸다.
2.5. 클래스 혹은 객체의 매서드: 암시적 바인딩
#!syntax javascript
var obj = {
method: function () {
return this;
},
};
obj.method(); // obj
클래스나 객체의 매서드의 경우, this는 해당 인스턴스 자체를 가리킨다.
[1] 함수인데 객체마냥 매서드를 호출하라니 이해가 안될수도 있지만, 자바스크립트에선 함수도 결국엔 객체처럼 취급한다.