생성자가 생성자로 호출되었는지 확인하는 방법 in JS

동동·2021년 8월 30일
1

JS의 함수에는 [[Call]][[Construct]]라는 두가지의 내부 메서드가 있습니다.

함수를 new 연산자 없이 호출할 때에는 [[Call]] 메서드가 실행되고 new 연산자로 호출할 때에는 [[Construct]] 메서드가 실행됩니다. [[Construct]] 메서드는 인스턴스라 부르는 새 객체를 만들어 this에 할당하고 함수를 실행합니다. [[Construct]] 메서드를 가진 함수를 생성자라고 부릅니다.

※모든 함수가 [[Construct]]를 가지지 않습니다.

  • 화살표 함수 및 객체의 메서드는 [[Construct]] 메서드를 가지지 않습니다.
  • 클래스 생성자는 [[Call]]메서드를 가지지 않습니다.

생성자가 생성자로 호출되었는지 확인하는 방법

1. instanceof

A instanceof BB.isPrototypeOf(A) 와 동일한 표현입니다. 즉, B가 A의 프로토타입 체인에 존재하는 객체인지를 판단합니다.
this instanceof 생성자true라고 하여도, this가 새로 생성된 생성자의 인스턴스인지, 아니면 기존에 존재하던 생성자의 인스턴스가 bind된것인지 정확하게 구분해낼 수 없습니다.

2. new.target

new.target 메타 프로퍼티는 ES6에 추가된 기능으로, new 연산자의 실행 대상에 관련된 부가정보를 제공합니다. (※ 여기서 new는 객체가 아닙니다!)
함수의 [[Construct]] 메서드가 호출될 때 new.target에는 new 연산자의 실행 대상인 생성자가 할당됩니다.
만약 [[Call]]이 실행되면 new.targetundefined 입니다.

this instanceof 생성자 대신 new.target === 생성자를 이용하면 함수가 생성자로 호출되었는지 일반 함수로 호출되었는지를 정확하게 구별할 수 있습니다.

new.target은 일반 함수(function) 내에서만 사용할 수 있습니다. 일반 함수 내 선언된 화살표 함수내에서 new.target은 상위 스코프의 new.target입니다.

profile
작은 실패, 빠른 피드백, 다시 시도

2개의 댓글

comment-user-thumbnail
2021년 8월 31일

new.target 점 연산자로 접근하는 것처럼 보이는데 객체가 아니라니 ㅠ_ㅠ 어렵네요... 그래도 덕분에 한번 접했습니다 👍👍👍

1개의 답글