JavaScript this

이 글은 JavaScript 에서 this에 관해 정리한 글입니다.

JavaScript 에서 this는 특이하게도 this가 가리키는 것이, 함수를 정의할 때 정해지는 것이 아니라 어떻게 호출하느냐에 따라서 달라집니다.

그 이유는 함수를 호출 시 실행 콘텍스트(Execution Context)라 는 것이 만들어지는데 이 것은 함수의 콜 스택(Call Stack), 호출 방법, 매개변수 등에 대한 정보를 담고 있습니다. this는 이 실행 콘텍스트의 정보중 하나이기 때문에 함수를 어떻게 호출하는지에 따라서 this가 가리키는 것이 달라집니다.

 

 

1. new로 호출 -> this는 생성된 객체를 가리킵니다.

function foo (name) {
  this.name = name;
}
const bar = new foo('bar');
console.log(bar.name); // "bar";

2. call, apply 사용하여 호출 -> this는 인자로 명시된 객체를 가리킵니다.

function foo () {
  console.log(this.name);
}

const bar = {
  name: 'bar'
};

foo.call(bar);  // "bar"
foo.apply(bar); // "bar"

3. 콘텍스트에서 호출 -> this는 콘텍스트를 가리킴

const obj = {
  name: "obj",
  foo: function () {
     console.log(this.name);
  }
}

obj.foo(); // "obj"

4. 그 외에는 엄격 모드에서는 undefined,  비 엄격 모드에서는 전역 객체를 가리킵니다.

 

  엄격 모드

"use strict";
function foo() {
  console.log(this);
}

foo(); // undefined

  비 엄격 모드

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

foo(); // Window {...}

참고

• You Don't Know JS - https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/this-object-prototypes/ch2.md

getify/You-Dont-Know-JS