this

this는 상황에 따라 가리키는 것이 달라져서 헷갈리기 쉽다.
this는 '호출하는 시점'에 결정되며, 각각의 경우에 따라 this가 무엇을 가리키는지 알고 있어야 한다!

① this는 기본적으로 window이다.

function a() { 
  console.log(this);
};
a(); // Window {}

② 객체 메서드 안의 this는 '객체 자기 자신'을 가리킨다.
(화살표 함수가 아닌 일반 function일 때만 this가 제대로 자기 자신을 가리킨다.)

'객체.메서드' 형태여야 this는 자기 자신을 가리킨다.
별도의 변수에 할당하여 그냥 함수를 호출하면 this는 window를 가리킨다.

const b = {
  name: 'yomi',
  sayName() {
    console.log(this);
  }
};
b.sayName(); // b

const notb = b.sayName(); // notb는 b의 메서드가 아님!
notb(); // Window

this가 객체 자신을 가리키게 하는 방법

• bind, call, apply 메서드 사용하기

• 생성자 함수에서 new로 호출하기

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHi = function() {
  console.log(this.name, this.age);
}

Person('BBirong', 5);
console.log(this.name, this.age); // window.name, window.age

const yomi = new Person('Brian', 29); // Person {name: "Brian", age: 29}
yomi.sayHi(); // Brian 29

• 💥주의! 암기!
  addEventListener() 이벤트 함수 바깥쪽 this와 안쪽 this가 달라지므로 바깥 this를 다른 변수에 저장하거나 화살표 함수 사용하기
  (바로 이벤트가 발생할 때, 내부적으로 this가 바뀐 것이다.)

$div.addEventListener('click', function() {
  console.log(this); // div
  const that = this; // 새로운 변수에 저장
  function inner() {
    console.log(that); // this(Window) -> that(div)
  }
  inner();
});

$div.addEventListener('click', function() {
  console.log(this); // div
  const inner = () => { // ES6 화살표 함수
    console.log(this); // div
  }
});
// this를 window 대신 상위 함수의 this를 가져온다.