자바스크립트의 this란

자바스크립트를 처음 배울때 종종 헷깔렸었던 this에 대해 간단히 정리해보고자한다.
this란 함수 안에서 사용되는 약속된 키워드이고 함수가 어떻게 호출되느냐에 따라 값이 달라진다.

1. 함수내에서의 this

function a() {
  console.log(this);
}
a(); // window객체가 출력된다.

일반적으로 함수 내에서 this를 호출한다면 전역객체인 window가 된다.

2. 객체 내 함수에서의 this

var obj = {
  funcA : function() {
    console.log(this);
  }
}
obj.funcA(); // obj 객체의 값이 출력된다.

1과 2의 내용은 사실 같은 내용이다.
1번과 같이 선언되는 함수의 경우 전역객체인 window 아래로 들어가게 된다.
즉, this는 호출된 함수가 소속된 객체를 가리키는 것이다.

3. 생성자에서의 this

// 1번에서의 호출방식
function func1() {
  this.value1 = 10;
}
func1();
console.log(window.value1); // 10

1에서 설명했다시피 전역객체 window에 value1의 값이 할당된다.

// 생성자를 통한 함수호출
function func2() {
  this.value2 = 20;
}
var obj = new func2();
console.log(obj.value2); // 20
console.log(window.value2); // undefined

생성자를 통해 함수를 호출할 경우 새로 생성되는 객체가 생성자 내에서 this가 된다.
쉽게 생각해보자면 생성자를 통한 this 호출 시 주석부분이 있다고 생각해보자

// 생성자를 통한 함수호출
function func2() {
  // this = {};
  this.value2 = 20;
  // return this;
}
var obj = new func2();

4. apply, call, bind에서의 this

var obj1 = {
  data: 1
}
var obj2 = {
  data: 2
}
function func() {
  console.log(this.data);
}
func.apply(obj1); // 1
func.call(obj1);  // 1
func.apply(obj2); // 2
func.call(obj2);  // 2

var f = func.bind(obj1);
f(); // 1

apply, call, bind의 경우 사용법에 차이는 있지만 this의 관점에서만 보자면 동일하다.
바인딩해준 객체가 된다.

Arrow function에서의 this

function outer() {
  console.log(this)  // 아래의 결과로 outer가 찍힌다.
  function inner() {
    console.log(this); // window가 찍힌다.
  }
  inner();
}
var obj = new outer();

outer의 경우 생성자를 사용하였으므로 outer가 출력되지만 inner함수의 this는 window가 출력된다.
원하는 결과를 출력하려면 아래와 같이 this를 새로 할당하는 등의 작업이 필요하다.

function outer() {
  console.log(this)  // 아래의 결과로 outer가 찍힌다.
  var that = this;
  function inner() {
    console.log(that); // window가 찍힌다.
  }
  inner();
}
var obj = new outer();

function outer() {
  console.log(this)
  const inner = () => {
    console.log(this);
  }
  inner();
}
outer(); // outer 객체가 2번 찍힌다.

arrow function을 사용할 경우 위와 같은 귀찮은 과정을 생략할 수 있다.