[JS] this의 개념

this는 기본적으로 Window 객체를 말한다.(Node.js는 Global 객체).

this의 값은 함수를 호출하는 방법에 의해 결정된다! 어떻게 불렸는가가 중요!
누가 호출했는가!!!가 정말 중요하다.

function foo() {
	console.log(this); 
}
foo(); // 그러면 window객체가 출력이 된다.(window.)foo 라고 보면된다. 즉 누가 불렀는지 모르는거야

const obj = {
	list : [1,2,3],
    foo
}
obj; // {list: Array(3), foo: f}
obj.foo(); // {list: Array(3), foo: f}

const obj2 = {
	list : [4,5,6],
}
foo.call(obj2) // {list: Array(3)} -> 4,5,6

foo()가 어떻게 불리었는가가 위와 같이 설명이 되는 것이다.
this 값이 어떻게 바뀌고 있는지, 해당 this가 무슨 값인지 알기 위해선 코드의 문맥을 살펴보아야한다.

객체의 메소드를 호출하는 경우

const myObj = {
  myValue: 6,
  myWindow: this,
  myFunc: function() {
    console.log(this);
  },
  myArrow: () => {
    console.log(this);
  },
};

console.log(myObj.myFunc()); // myObj 객체
console.log(myObj.myArrow()); // Window 객체

함수를 어떤 객체의 메소드로 호출하면 this의 값은 그 객체를 사용합니다.
ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다.
-MDN web docs-

function 키워드는 해당 객체를 바인딩하여 this의 값을 변경하는 것이고,
() => {}는 상위 객체의 this를 그대로 이어받아 사용한다.

생성자를 통해 객체를 생성하는 경우

function Programmer(name, age) {
  this.name = name;
  this.age = age;
}

// 생성자를 사용하지 않은 경우 - 단순 호출
const covy = Programmer('Covy', 20); // covy 변수는 undefined
console.log(window.name, window.age); // Covy 20

// 생성자를 통한 객체 생성
const tony = new Programmer('Tony', 25);
console.log(tony.name, tony.age); // Tony 25 - this가 해당 객체에 바인딩됨

new 키워드를 통해 객체를 생성하면, this가 해당 객체에 바인딩 되어 해당 값을 읽게 되는 것입니다. es6에 추가된 class를 사용하면 동일하게 작동하는 것을 볼 수 있습니다.

화살표안의 this는 선언될 때 결정됨

화살표 함수에서의 this는 함수가 속해있는 곳의 상위 this를 계승받는다.