[JavaScript] 화살표함수 / this

function키워드를 사용해서 만든 함수는 동적인 this때문에 이리저리 바인딩하느라 혼동을 줄 수 있음 화살표 함수를 사용하면 어떤방법으로 호출하던 this의 값이 변하지않음
화살표함수의 this값은 그 함수를 감싸는 스코프의 this를 그대로 가져와서 사용
전통적인 함수의 this는 함수를 호출하는 방법에 따라 동적으로 바뀜

this 복습

---

일반함수 this

const object = {
  name:'jungo',
  main: function () {
    console.log(this);
  },
};
object.main();
// {name:'jungo',main:f}

함수를 어떤 객체가 호출했냐에 따라 this가 달라짐
-> object 객체

• 일반함수가 가지는 this값은 함수가 선언된 위치랑은 관련 x

• 함수가 호출된 방법에 따라 달라짐

화살표함수 this

화살표함수는 자신만의 this를 가지고 있지 않는다.
화살표함수 내부에서 this에 접근하면 외부에서 가져와서 사용

const object = {
  name:'jungo',
  main: function () {
    console.log(this);
  },
  mainArrow:()=>{
    console.log(this)
  }
};

object.mainArrow();

결과

window가 this값으로 나온다.
화살표함수는 자신만의 this를 가지지 않기 때문에 자신을 감싸고있는 스코프로 올라가서 this를 찾는다.

• 선언된 위치에서 this가 결정된다. === 함수가 호출된 방법과는 무관하다.

따라서

const object = {
  name:'jungo',
  main: function () {
    console.log(this);
  },
  mainArrow:()=>{
    console.log(this.name)	//아무것도 출력 x
  }
};

object.mainArrow();

화살표함수는 this가 더이상 object가 되지않기 때문에 object속성에 접근할 수 없음

객체의 메서드로는 화살표함수보다 일반함수를 사용하는 것이 적절

---

예제

const object = {
  name:'jungo',
  main: function () {
    const innerFunction = function (){
      console.log(this)
    };
    innerFunction()
  },
};

object.main();

결과 - window

this값이 object가 아닌 window가 출력되는 이유

• innerFunction은 어떤 객체로부터 직접적으로 호출된게 아님 따라서 innerFunction안에 this는 window

수정 예제(화살표함수)

const object = {
  name:'jungo',
  main: function () {
    const innerFunction = () => {
      console.log(this)
    };
    innerFunction()
  },
};

object.main();

결과

//object 객체
{name:'jungo', main:f}

화살표 함수의 this는 감싸는 외부 스코프(main함수)의 this를 그대로 사용

• main함수 안에있는 this값은 object객체