자바스크립트에서 this 키워드의 사용과 특성

this - JavaScript | MDN

this - JavaScript | MDN

 

---

 

자바스크립트에서 함수의 `this` 키워드는

다른 언어와 조금 다르게 동작합니다.

 

대부분의 경우 `this`의 값은 함수를 호출한 방법에 의해 결정됩니다.

실행중에는 할당으로 설정할 수 없고,

함수를 호출할 때 마다 다를 수 있습니다.

 

---

 

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

 

실행 컨텍스트의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며,

엄격 모드에서는 어떠한 값이든 될 수 있습니다.

 

---

 

전역 실행 맥락에서 `this`는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.

 

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

 

---

 

함수 내부에서 `this`의 값은 함수를 호출한 방법에 의해 좌우됩니다.

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

 

이 예제는 엄격 모드가 아니며 `this`의 값이 호출에 의해 설정되지 않으므로,

기본값으로 브라우저에서는 `window`인 전역 객체를 참조합니다.

 

반면에, 엄격 모드에서 `this` 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로

다음 예시에서 보여지는 것 처럼 `this`는 `undefined`로 남아있습니다.

 

function f2() {
  "use strict"; // 엄격 모드 참고
  return this;
}

f2() === undefined; // true

 

두번째 예제에서 `f2`를 객체의 메서드나 속성으로써가 아닌 직접 호출했기 때문에 `this`는 `undefined` 여야 합니다.

 

그러나 엄격 모드를 처음 지원하기 시작한 초기 브라우저에서는 구현하지 않았고, `window` 객체를 잘못 반환했습니다.

 

---

 

[ 화살표 함수의 `this` ]

 

화살표 함수에서 `this`는 자신을 감싼 정적 범위입니다, 전역 코드에서는 전역 객체를 가리킵니다.

 

var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); // true

 

어떤 방법을 사용하든 `foo`의 `this`는 생성 시점의 것으로 설정됩니다. (위 예시에서는 global 객체)

 

다른 함수 내에서 생성된 화살표 함수에도 동일하게 적용됩니다.

 

`this`는 싸여진 렉시컬 컨테스트의 것으로 유지됩니다.

 

---

 

[ 객체의 메서드로서 `this` ]

 

함수를 어떤 객체의 메서드로 호출하면 `this`의 값은 그 객체를 사용합니다.

 

다음 예제에서 o.f()를 실행할 때, `o` 객체가 함수 내부의 `this`와 연결됩니다.

 

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

console.log(o.f()); // 37

 

---

 

그리고 또 여러 `this` ...

 

- 객체의 프로토타입 체인에서의 `this`

- 접근자와 설정자의 `this`

- 생성자로서 `this`

- DOM 이벤트 처리기로서 `this`

- 인라인 이벤트 핸들러에서 `this`

 

등 여러 활용 예제가 MDN Docs에 제시되어 있습니다.

 

---

this - JavaScript | MDN

this - JavaScript | MDN

MDN Docs를 참고하여 작성된 게시글입니다.