this

this가 가리키는 것은 함수를 호출한 방법에 의해 결정된다.
this는 실행 컨텍스트에 저장하고 관리된다.
실행 중엔 할당되지 않는다.

Global

전역에서 this를 사용하면, 브라우저 상에서 전역 객체인 window 객체를 가리킨다.

Function

함수에서 this가 가리키는 것은 호출되는 상황에 따라 다르다.

단순 호출

함수를 단순히 호출하는 경우 따로 설정이 없이 전역 객체인 window 객체를 가리킨다. 단, 'use strict'를 이용해 엄격한 모드를 사용하면 실행 문맥에서 찾기 때문에 this는 undefined가 된다.

this의 값을 한 문맥에서 다른 문맥으로 넘기기 위해서는 call() 메서드나 apply() 메서드를 사용한다.

var obj = {a: 'function'};
var a = 'global';

function printThis() {
  console.log(this.a);
}

printThis(); // global
printThis.call(obj); // function
printThis.apply(obj); // function

Bind

함수를 호출할 때 bind(obj) 메서드를 사용하면 특정 객체를 this에 할당해 함수를 호출한다.

var obj = {a: 'Hi'};

function f1() {
  console.log(this.a);
}

var g = f1.bind(obj);
g(); // Hi

화살표 함수

자신을 감싸고 있는 정적 범위를 가리킨다. 사용되는 문맥에 위치한다고 본다.

화살표 함수는 call(), apply(), bind() 메서드를 사용해도 무시한다.

객체 내 메서드

객체 내에 선언된 메서드에서 this를 사용할 경우 메서드가 속한 객체를 가리킨다. 이는 클래스를 생성할 때, 생성자, getter, setter, 그리고 클래스 내 메서드에서도 this는 선언된 클래스를 가리키게 된다.

DOM 이벤트 처리

addEventListener와 같은 이벤트 처리에서 this는 이벤트를 발생시킨 DOM 요소를 가리킨다.

인라인 이벤트 핸들러

DOM 요소에 인라인 이벤트 핸들러를 두면 속한 DOM 요소를 가리킨다.

---

참고

• this - JavaScript | MDN