javascript this

나는 평소 js에서 this나 prototype을 활용해본 적이 없다
c, java를 하다가 js를 넘어왔는데, 공부하면서 use strict를 기본으로 사용했다
리액트는 타입스크트와 함께 시작했고,
리액트에서 컴포넌트를 만들 때도 함수형으로 작성을 시작해서 this를 사용해본 경험이 없었다
자연스럽게 thisless한 코드를 작성하게 되고 선호하게 되었다
근데 this를 사용한 코드를 볼 때, 해석할 수 있어야 한다
그동안 애매하게 알고 있었던 this에 대해 공부해보았다

this

  • use strict / default(sloppy mode)

최상위 스코프에서

  • window / windows

함수안에서 (function)

  • undefined / window

객체안에서

  • 자기 자신{} / 자기 자신
  • 객체 멤버로 화살표 함수가 있는 경우 : 자기 자신{}이 아니라 자기 자신{}보다 한 단계 위

화살표함수에서

  • window / window

정리

  • strict mode일 때와 아닐 때 동작이 달라진다
  • strict mode가 아닌 경우(sloppy mode)는 생각하지 말자
  • 화살표 함수는 항상 한 꺼풀 위와 동일한 this
  • 함수(function keyword)와 객체의 경우 자기 자신만의 스코프를 만들고 자기를 바라본다
  • this는 누가 실행했냐에 따라 달라진다
  • this를 고정시키려면 bind, apply를 사용한다

생각

  • this, 컨텍스트, 스코프 체인, 렉시컬 스코핑 뒤죽박죽 개념이 떠올라서 항상 헷갈린다

참고