[JS] This, Binding
1. This 란?
자바스크립트에서의 this는 상황에 따라 바라보는 대상이 달라진다. 즉, 실행컨텍스트가 생성될때, 함수가 호출될때 결정된다.
1) 전역공간에서의 This: 전역공간에서는 전역객체를 가리키게된다. 브라우저 환경에서 전역객체는 window이고, Node.js에서는 global 이다. 자바스크립트에서 모든 변수는 특정객체의 프로퍼티로서 동작하게되는데, 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당하게 된다.
2) 메서드 내부에서의 this: 메서드 내부에서는 호출한 주체에 대한 정보가 담긴다. 어떤함수를 메서드로서 호출하는 경우 호출주체는 함수명앞의 객체가 된다.
3) 함수내부에서의 this: 함수내부에서는 전역객체를 바라보게 된다. ES6에서는 함수내부에서 this가 전역객체를 바라보는 문제를 보완하고자 this를 바인딩하지 않는 화살표함수를 새로 도입하였고, 그외에도 call, apply, bind의 메서드를 통해 명시적으로 this를 지정할수도 있다. ES5환경에서는 var self 를 선언하여 객체를 바라보게끔 우회해줄수도 있다.
4) 콜백함수 호출시 함수내부에서의 this: 콜백함수에서는 제어권을 다른함수에게 넘겨주므로, 제어권을 가진함수에서의 내부로직에서 정한 규칙에 따라 값이 결정되게 된다. 콜백함수도 함수이기 때문에 기본적으로 전역객체를 참조하지만, 제어권을 받은 함수에서 콜백함수에 별도로 this가 지정된 경우라면 그 대상을 참조하게 된다. 해당 내용은 콜백함수 게시글에서 자세히 확인할 수 있다.
2022.05.13 - [FrontEnd] - [JS] 콜백함수, 콜백지옥
[JS] 콜백함수, 콜백지옥
1. 콜백함수란? 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 예를들면 A와 B는 토요일 오전 7시에 만나기로 하였다. 둘은 만나기위해 5시에 기상하
yeon-code.tistory.com
5) 생성자 함수 내부에서의 this: 생성자 함수를 호출하면 생성자의 프로토타입 프로퍼티를 참조하는 __proto__라는 프로퍼티가 있는 객체를 만들고, 미리 준비된 속성을 해당 객체에 부여하게 된다. 즉, 인스턴스를 가리키게 된다.
2. 명시적으로 this를 바인딩 하는법
1) call 메서드: 메서드의 호출주체인 함수를 즉시 실행하도록 하는 명령이다. 첫번째 인자를 this로 바인딩하고, 이후 인자들은 호출한 함수의 매개변수로 쓰인다.
2) apply 메서드: call과 기능적인 측면에서 거의동일하나, apply는 두번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정을 해준다.
3) bind 메서드: call과 비슷하지만 즉시 호출하지는 않고 새로운 함수를 반환하기만 하는 메서드이다. 새로운 함수를 호출할때 인수를 넘기면 그 인수든 기존 bind메서드를 호출할때 전달했던 인수들 뒤에 이어서 등록되므로 부분적용함수를 구현할수도 있다.
4) 화살표함수: ES6에서 새롭게 도입된 화살표함수는 실행컨텍스트 생성시에 this를 바인딩 하지않는다. 따라서 함수 내부에서는 this가 아예 없고, 접근하려면 스코프체인상 가장 가까운 this에 접근하게 된다.
✨ 이 글은 정재남님의 코어자바스크립트를 참고하여 작성된 글입니다. 프론트엔드 개발자라면 꼭 사서 읽어보시는 것을 추천드립니다.
