화살표 함수에서 this

내가 보고 기억할라고 기록하는 this..

내가 알던 기존의 함수에서 사용하는 this는

const person = {
    firstName : "jaeho",
    lastName: "Lee",
    fullName : function(){
        return `${this.firstName} ${this.lastName}`
    }
}

person.fullName() // 결과값 'jaehoLEE'

함수 메서드에서의 this는 객체를 가르킨다 근데.. fullName 을 화살표 함수로 바꾸면

const person = {
    firstName : "jaeho",
    lastName: "Lee",
    fullName : () => {
        return `${this.firstName} ${this.lastName}`
    }
}

person.fullName() // 결과값 undefined undefined

왜 언디파인드가 뜨는걸까.. 열심히 검색해보니 화살표 함수에서 this는 바깥 스코프에서 this 의 값을 계승받는다고 한다
즉 this 는 메소드를 호출한 객체를 가리키지 않고 상위 컨텍스트인 전역 객체, window 를 가리키게 된다는것.. this는 window였다..
객체의 메소드를 호출할라믄 화살표 함수가 아닌, function 문법 함수를 사용해야 한다구 한다..

또다른 한가지..!

const account = {
    username: "Leejaeho",
    age : 28,
    getAge: function() {
      innerFunc = () => `${this.username}님의 나이는 ${this.balance}입니다.`;
      console.log(innerFunc());
    }
  };
  account.getAge(); //Leejaeho 잔액은 28.

이 예제 같은 경우에는 함수메서드 안에 화살표 함수를 사용해서 getAge()를 호출했다 그런디 결과가 잘 나온걸 볼수있다.!
왜 그런거 했더니 화살표 함수는 자신만의 this 를 갖지 않기 때문에, 바깥 스코프에서 this 의 값을 계승받는다는것
그러니 상위 스코프는 account의 this 이므로 정상적으로 출력하는것이다 , 근데 왜 이렇게 사용하는지는 잘 모르겠다.. 허허