나는 FE 개발 입문을 SPA 로 시작했다. 너무나 익숙하게 Arrow function과 this의 스펙을 활용하고 있다. 어느 날 갑자기 ES6 이전에는 비슷한 기능을 어떻게 구현했을지 궁금해졌다.
1. this: 알고있던 내용
- 호출한 대상을 가리킨다.
- 기본적으로는 전역 객체(Node 환경의 global, 웹 브라우저의 window) 를 가리킨다.
- 클래스나 메서드 등에서 호출될 시 ‘호출한’ 객체.
- this는 함수 호출 시 자동으로 bind됨.
- (ES6) this의 자동 bind 원하지 않을 시 Arrow function(화살표 함수) 를 사용할 것.
2. this: 궁금했던 내용
- Arrow function(화살표 함수) 는 ES6 스펙이다.
- ES6는 ECMAscrpit 2015년 스펙이다.
- 2015년 이전에도 비슷한 기능에 대한 수요가 존재했을 것이다. (This를 특정 객체만 가리키게 하는)
- 이를 어떻게 구현했을까?
3. bind 함수
- 새로운 바인딩한 함수를 생성하는 함수 .
- 간단한 사용법: 호출 방법과 관계 없이 특정 this 값으로 호출되는 함수 제작 가능.
Function.prototype.bind() - JavaScript | MDN
4. 기타 공부했던 내용
- this - MDN docs
- ECMA 스크립트 명세
ECMAScript® 2024 Language Specification
- Arrow Function