자바스크립트 개발자가 알아야할 33가지 개념[#15. this, call(), apply() and bind()]

this

this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다. 자바스크립트 엔진에 의해 암묵적으로 생성되며 객체의 프로퍼티나 메소드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메소드 내부 또는 생성자 함수 내부에서만 의미가 있다.

 

전역객체

전역객체는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 Window, Server-side(Node.js)에서는 global객체를 의미한다.

또한, 전역객체는 전역 스코프를 갖는 전역변수를 프로퍼티로 소유한다. 글로벌 영역에 선언한 함수는 전역객체의 프로퍼티로 접근할 수 있는 전역 변수의 메소드이다.

 

 

함수의 this

 

기본적으로 this는 전역객체 (Global object)에 바인딩된다. 전역함수는 물론이고 심지어 내부함수의 경우도 this는 외부함수가 아닌 전역객체에 바인딩된다.

콜백함수의 경우에도 this는 전역객체에 바인딩된다.

내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관계없이 this는 전역객체를 바인딩한다.

 

 

객체의 매소드 this

객체의 프로퍼티의 value값이 함수 일 경우 메소드라고 한다.

위와 같이 메소드 내부에 새로운 변수 that에 this를 할당하여 메소드의 내부 함수가 전역객체에 바인딩되는 것을 막을 수 있다.

aInner함수에 메소드 내부에 생성된 that을 활용한다.

 

또한, 위와 같이 객체의 메소드를 새로운 변수에 할당하는 경우 호출하는 시점에 this는 Window로 변경된다. 왜냐하면 변수 a2는 obj의 프로퍼티가 아닌 전역객체의 프로퍼티이기 때문이다. (변수 a2는 메모리힙에 저장되는 obj.a의 주소 값을 참조하는 것일 뿐이다.)

 

일반함수 와 화살표함수의 this바인딩

• tihs 바인딩 방식 : 일반 함수는 호출 방식에 따라 this가 결정되고, 화살표 함수는 언제나 상위 스코프 this를 가리킨다.
• 생성자 함수로 사용 가능 여부 : 일반 함수는 생성자 함수로 사용 가능하지만 화살표 함수는 생성자 함수로 사용할 수 없다. 왜냐하면 prototype프로퍼티 가지고 있지 않기 때문이다.
• arguments 객체 : 함수 생성 시 일반 함수에는 암묵적으로 arguments객체가 전달되며 화살표 함수에서는 arguments객체가 전달되지 않는다.

 

생성자 함수의 this

자바스크립트의 생성자 함수는 말 그대로 객체를 생성하는 역할을 한다. 기존 함수에 new연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

 

생성자 함수가 아닌 일반 함수에 new연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다.

따라서 일반적으로 생성자 함수명은 첫문자를 대문자로 기술하는 컨벤션이 있다.

• Person.prototype.getName과 같이 프로토타입 객체 메소드 내부에서 사용된 this도 일반 메소드 방식과 마찬가지로 해당 메소드를 호출한 객체에 바인딩 된다.
• 변수 you와 같이 new연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수로 동작하지 않는다.
• 변수 me는 Person의 인스턴스이다. 생성자 함수의 this는 자신이 생성할 인스턴스를 가리키기 때문에 me를 가리키게 된다.

 

함수 메소드 call(), apply(), bind()

일반 함수의 경우 call, apply, bind함수 메소드를 통해 명시적으로 this를 바꿀 수 있다.

call, apply, bind의 기능은 비슷하지만 아래와 같은 차이점이 있다.

• call : 첫 번째 파리미터로 this바인딩 결정, 두 번째 파라미터로부터 함수에 인자 전달 (인자를 각각 전달), 함수 실행
• apply : 첫 번째 파라미터로 this 바인딩 결정, 두 번째 파라미터부터 함수에 인자 전달(인자를 배열로 전달), 함수 실행
• bind : 첫번째 파라미터로 this 바인딩 결정, 두 번째 파라미터부터 함수에 인자 전달, 함수는 실행 하지 않음.

또한 위와 같이 화살표 함수는 this 바인딩을 제공하지 않는다, 동적으로 변경되는 일반 this와 다르게 정적으로 this가 결정되며 this는 언제나 상위 스코프의 this를 가리킨다.

 

 

 

---

참고 자료

• https://poiemaweb.com/js-this
• https://velog.io/@y_jem/javascript-this