Javascript에서의 this

Javascript에서 this를 활용하는 경우가 많기에 이를 활용하기 위해 정리한다.
this란 Function 내에서 약속된 keyword이며 어떻게 사용하느냐에 따라 사용 방법이 여러가지가 존재한다.

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에 들어가지만 2번의 경우 1번 함수를 부모 객체로 보게된다.
즉, this는 호출된 함수가 소속된 객체를 가리키는 것이다.

3. 생성자에서의 this 사용

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

1에서 설명했다시피 전역객체 window에 value1의 값이 할당된다.(static과 유사)

// 생성자를 통한 함수호출
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의 관점에서만 보자면 동일하게 인식한다.
바인딩해준 객체가 된다.

5. 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을 사용할 경우 위와 같은 귀찮은 과정을 생략하여 사용이 가능하다.