함수 호출 방식에 의해 결정되는 this에 대해 알아보자.
함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical scope)는 함수를 선언할 때 결정된다.
this 바인딩과 혼동하지 않도록 하자.
그리고 Java의 this와는 차이가 있으니 명심하자.

1. 자바스크립트의 'This'란?

: this는 객체와 연관이 깊다.

var myName = {name: "ash"}

• 예를 들어 myName이라는 객체가 있고, 특정 상황을 만족할 경우 this.name을 호출하면 "ash"가 출력되다.
  이때, myName을 this의 콘텍스트(context)객체라고 한다.
  this가 바라보는 객체? 정도로 해석하자.

1) Implicit Binding (암시적 바인딩)

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);
  }
};
goat.diet(); 
// Output: herbivore

• 어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this의 context 객체가 됩니다.
• 위 예시에서 객체goat를 통해 함수diet는 호출되었으므로 goat가 this가 되는 것이다.

2) Explicit Binding (명시적 바인딩)

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

var obj = { name: "ash" };
test.call(obj); // { name: 'ash' }

• 함수(함수 객체)는 call, apply, bind 메소드를 가지고 있는데, 첫번째 인자로 넘겨주는 것이 this context 객체가 된다.

2. Arrow 함수에서 'This'

: this를 화살표 함수에서 사용할 경우 조금 복잡해진다.

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet: () => {
    console.log(this.dietType);
  }
};

goat.diet(); // Prints undefined

• diet는 화살표 함수로 정의되었다.
• 화살표 함수는 호출한 객체가 아닌 글로벌 스코프의 범위에 묶인다.