this
1. 상황에 따라 달라지는 this
함수와 객체(메서드)의 구분이 느슨한 자바스크립트에서 this는 실질적으로 이 둘을 구분하는 거의 유일한 기능
this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정됨.
this는 함수를 호출할 때 결정된다고 할 수 있다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것.
1) 전역 공간에서의 this
전역공간에서 this는 전역 객체를 가리킨다.
전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문.
전역 객체는 런타임 환경에 따라 다른 이름과 정보를 가지고 있다.
브라우저 환경 : 전역객체 - window
Node.js 환경: global
2) 메서드로 호출할 때의 this
함수는 그 자체로 독립적인 기능을 하지만(독립성ㅇ), 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행한다.
•
함수로서의 호출과, 메서드로서의 호출을 구분하는 법
◦
함수 앞에 점(.)이 있는지 여부로 간단하게 구분 가능.
◦
func(); / obj.method(); ← 두번째가 메서드로서 호출한 경우임.
◦
❗️점 표기법이든 대괄효 표기법이든(obj[’method’]();) 어떤 함수를 호출 할 때 그 함수 이름(프로퍼티명) 앞에 객체가 명시돼 있는 경우에는 메서드로 호출한 것이고, 그렇지 않은 모든 경우는 함수로 호출한 것.
•
메서드 내부에서의 this
◦
this에는 호출한 주체의 정보가 담기는데, 어떤 함수를 메서드로서 호출한 경우 호출 주체는 바로 함수명(프로퍼티명) 앞의 객체이다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this.
3) 함수로서 호출할 때의 this
함수에서의 this는 전역 객체를 가리킨다.
함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지 등)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지 없는지 확인하면 된다.
4) this를 바인딩 하지 않는 함수 → 화살표 함수!
화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 자체가 빠지게 되어, 상위 스코프의 this를 그대로 활용한다.
5) 콜백 함수 호출 시 그 내부에서의 this
함수 A가 콜백함수라고 할 때, 함수 A는 제어권을 넘겨준 함수 B의 내부 로직에 따라 실행되고, this 역시 함수 B 내부 로직에서 정한 규칙에 따라 값이 결정됨. 콜백함수도 기본적으로 함수이기 때문에 this가 전역 객체를 참조하지만, 제어권을 받은 함수에서 콜백함수에 별도로 this가 될 대상을 지정한 경우엔 그 대상을 참조함.
6) 생성자 함수 내부에서의 this
생성자 함수는 어떤 공통된 성질을 지니는 객체들을 생성하는 데 사용하는 함수이다.
자바스크립트는 함수에 생성자로서의 역할을 함께 부여함. new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로서 동작함. 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이 된다.
2.
명시적으로 this를 바인딩하는 방법 ← 나중에 다시 공부하기…
일반 객체에 length 프로퍼티를 가진 객체를 유사배열객체(array-like objects)라고 함
일반 객체이지만 자바스크립트의 표준 배열 메서드를 사용하는 것이 가능
call, apply 메서드는 this를 명시적으로 지정하면서 함수 또는 메서드를 호출한다.
bind 메서드는 this 및 함수에 넘길 인수를 일부 지정해서 새로운 함수를 만든다.
요소를 순회하면서 콜백함수를 반복 호출하는 내용의 일부 메서드는 별도의 인자로 this를 받기도 한다.
