JS - this

JS 를 사용하면서 헷갈리는 부분 중 하나는 단연코 this 일 것 이라고 생각한다.
이에 간단히 메모를 남긴다.

함수? 메서드?

this 에 대해 메모를 한다고 했는데 갑자기 뭔 함수, 메서드지? 생각 할 수 있지만 이 둘에 대해 알면 this 를 파악하기 좀 더 쉽다.

• 함수: 독립적으로 실행된 기능
• 메서드: 어딘가에 속해져 있는 상태로 실행되는 기능

설명이 미흡해 뭔 소린가 할 수 있지만 Array.from() 과 같이 Array 에 속해져서 호출되는 친구들이 메서드다. 그냥 from() 이렇게 실행되면 함수라고 생각하면 된다.

this

그렇담 이제 this 로 돌아와서 함수에서의 this 는 전역객체(브라우저는 window, Node.js에서는 global)이고, 메서드에서 this 는 호출한 주체이다. 위에 Array.from() 에서 from() 내에서 this 가 사용된다면 Array 객체가 this가 된다고 생각하면 된다.

콜백함수 는 조금 다를 수 있는데 제어권 넘겨받은 함수가 정의하는 바에 따라 다르다. 정의하지 않고 있다면 일반 함수처럼 전역객체를 참조한다.

생성자 함수에서는 생성될 인스턴스를 참조하고, 전역공간에서는 전역객체를 참조한다.

화살표 함수의 경우 좀 다른데 해당 함수는 실행 컨텍스트 생성 시 this를 바인딩하는 과정이 제외 됬으며 this는 스코프체인을 통해 가까운 this에 접근한다.

this binding

그렇담 내가 원하는 this를 쓰도록 할 수 없냐? 그건 아니다.
call, apply, bind 와 같은 함수를 사용하여 원하는 this 를 함수에 설정해줄 수 있다.
또한 일부 메서드들은 인자로 this를 받기도 한다.

자세한 사용법은 생략하고, bind 함수로 만들어진 함수는 name 프로퍼티와 해당 프로퍼티에 bound 접두사를 가진 원본 함수명을 값으로 가지게 된다.