This

• JS에서 this는 상황에 따라 다른식으로 바인딩 됩니다.
  대표적으로 this가 바인딩 되는 값들은 아래와 같습니다.

1. 전역공간의 this (전역 객체)
2. 메서드 호출 시 메서드 내부의 this (메서드를 호출한 객체)
3. 함수 호출 시 함수 내부의 this (undefined)
   
   3번 같은 경우에서 함수를 호출 했을 때 함수 내부의 this는 지정되지 않습니다.
   이런 경우에 this는 자동으로 전역 객체를 참조하게 되고 함수를 호출했을 때
   함수 내부에서 this는 전역객체를 참조합니다. ( window, global 등 )

1.1 함수 표현식 내부에서의 This

const cat = {
    name: 'meow',
    foo1: function() {
      const foo2 = function() {
        console.log(this);
      }
      foo2();
    }
  };
  
cat.foo1();	// 
/* 
출력 :
전역객체 window, global이 출력됩니다.

1. cat 객체안의 foo1() 메서드 호출
2. foo1() 메서드 안에 foo2() 함수가 호출됩니다.
3. foo2 함수 내부의 this는 전역 객체를 가르키게 됩니다. -> 브라우저 환경에선 window, node.js에선 global
4. console.log에 전역객체가 출력 됩니다.
*/

1.2 화살표 함수 내부에서의 This

const cat = {
    name: 'meow',
    foo1: function() {
      const foo2 = () => {	// 화살표 함수 사용
        console.log(this);
      }
      foo2();
    }
  };
  
cat.foo1();	
/* 
출력 : 
{ name: 'meow', foo1: [Function: foo1] }

cat 객체가 출력됩니다.
foo2 화살표 함수안에는 `this` 라는 연산자가 존재하지 않습니다.
JS는, 프로그램 특성상 현재 환경에서 변수가 존재하지 않는다면 바로 상위의 환경을 검색합니다.

foo2 화살표 함수의 상위 환경은 foo1 함수이므로, 해당 함수의 this를 가져옵니다.
foo1 함수는 자신을 호출한 cat 객체에 접근할 수 있으므로, foo2또한 cat 객체에 접근할 수
있게 됩니다.
*/

1.3 다른 환경에서 화살표 함수의 This

/* 함수 표현식에서 This */
const person = {
    firstName: 'chulsu',
    lastname: 'kim',
    fullName() {
        return console.log(`${this.firstName} ${this.lastname}`);
    }
}

person.fullName();	// chulsu kim, this는 자신을 호출한 객체(person)을 가르킨다.

/* 화살표 함수에서 This */
const person = {
    firstName: 'chulsu',
    lastname: 'kim',
    fullName: () => {
        return console.log(`${this.firstName} ${this.lastname}`);
    }
}

person.fullName();	
/*
출력 : 
undefined, undefined

1. fullName 메서드 호출
2. fullName 내부는 화살표 함수임 => this가 없다 
3. 화살표 함수 내부에서 this는 자신보다 상위환경인 person 객체를 호출한 전역 객체를 참조한다. 
(window or global)

4. 브라우저 환경이라 가정하면 전역객체는 window 이므로 화살표 함수 내부에서 this는 
window.firstName 으로 전역객체로 부터 접근하게 된다.

5. 전역 객체(window)에는 firstName 프로퍼티가 존재하지 않으므로 undefined이 출력 됩니다.
*/

1.4 콜백함수에서도 동일하게 작동한다.

/* 콜백 함수에서 This */
const person = {
    name: this,
    firstName: 'chulsu',
    lastname: 'kim',
    fullName: () => {
        return console.log(`${this.firstName} ${this.lastname}`);
    },
    shoutName: function(){			
        setTimeout( function() {	// 정규 표현식인 경우
            console.log(this);
            console.log(this.firstName);
        }, 2000)
    }
}

person.shoutName();
/* 
1. shoutName 메서드 호출
2. setTimeout 콜백함수는 정규표현식으로된 익명함수를 호출한다.
3. 일반함수 내부에서의 this는 전역객체를 가르키므로 this는 window 또는 global이 출력 되고,
this.firstName은 undefined 출력
*/

/* 
setTimeout( ) 콜백 함수가 화살표 함수였다면?

화살표 함수 내부에서 this는 존재하지 않기에, 자신의 상위 환경인 shoutName 함수를 찾고
해당 함수의 this를 출력한다. shoutName 함수는 person 객체에 접근할 수 있으므로 콜백함수 또한
person 객체에 접근할 수 있다.

즉 this는 cat 객체가 출력되고 this.firstName은 chulsu가 출력 됩니다.
*/

주의 사항

1. 화살표 함수는 메서드를 정의할 때 사용하면 안됩니다.
   객체가 아닌, 객체를 호출한 상위환경 전역객체를 호출하기 때문에 메서드를 만들 수 없다.

2. 화살표 함수는 생성자 함수에서 사용하면 안됩니다.
   생성자 함수로 만들 수 없게 설계되어 있기에 오류가 발생합니다.

3. addEventListener()의 콜백함수
   this 값이 정해져 있는 함수이므로, 함수 내부에서 this를 사용하면 전역객체를 참조하기에
   올바르게 작동하지 않습니다.