[JS] 생성자 함수

생성자 함수에 의한 객체 생성

예제

function Circle(radius){
  // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킨다. 
  this.radius = radius;
  
  this.getDiameter = function(){
  	return 2 * this.radius;
  };
}

const circle1 = new Circle(5)

이처럼 class문법이나 .prototype을 명시하지 않고도 객체를 생성할 수 있다.

Q. 그렇다면 생성자 함수와 일반함수를 자바스크립트는 어떻게 구분할까??

내부 메서드 [[Call]]과 [[Construct]]

함수는 객체이지만 일반 객체와는 다르다. 일반 객체는 호출을 할 수 없지만 함수는 호출할 수 있다. 따라서 함수 객체의 경우 [[Call]] 과 [[Construct]]의 내부 슬롯이 추가로 가지고 있습니다.

이때, [[Construct]] 슬롯을 가지고 있다면 생성자 함수가 되고, 그렇지 않을 경우 일반함수가 된다. 이때, 일반함수와 생성자 함수 둘 다 [[Call]] 함수를 가지고 있습니다.

new.target

우리가 개발을 할 때 만약 해당함수를 꼭 생성자 함수로만 쓰이고 싶게 하고 싶다면 new.target을 사용하면 좋다. 이는 스코프 세이프 생성자 페턴이라고 부르기도 한다.

예제

function Circle(radius){
  if(!new.target){  // IE 버전은 제공하지 않으므로 대신 (this instanceof Circle)
    return new Circle(radius);
  }

  this.radius = radius;

  this.getDiameter = function(){
  	return 2 * this.radius;
  };
}

참고자료

• 모던 자바스크립트 deep dive