자바스크립트의 함수는 객체이면서 다른 객체와는 다른 특성을 가지고 있다. 그 중 하나는 괄호 연산자를 이용해 직접 실행될 수 있다는 점과 다른 하나는 객체의 생성자로 사용될 수 있다는 점이다. es6 이후로 조금 덜 중요해진 듯하지만 함수가 객체 생성자로 사용될 때 어떻게 동작하는지 간단하게 정리하려고 한다.

주요 개념

1. prototype

prototype 프로퍼티는 함수 객체만 가지고 있는 프로퍼티다. 이 프로퍼티에는 객체가 할당되는데, 이 객체는 최초 constructor 라는 프로퍼티만 가지고 있다. constructor 는 prototype 프로퍼티가 속한 함수를 가리키고 있다.

2. [[prototype]]

자바스크립트 명세에 따르면 모든 자바스크립트 객체는 객체의 원형이 되는 객체를 지정해야 하는데 객체의 원형을 부르는 명칭이 [[prototype]]이다. 객체의 원형은 프로토타입 체이닝에 사용된다.

함수를 이용한 객체 생성 과정

  1. new 연산자를 이용해서 함수를 호출하면 객체의 생성자로 동작한다.
  2. 함수가 생성자로 호출되면 아래와 같은 동작이 묵시적으로 추가된다.
    1. 빈 객체를 만들고 호출된 함수의 prototype 프로퍼티를 객체의 원형([[prototype]])으로 지정한다.
    2. 위 에서 생성된 객체는 this라는 이름으로 바인딩된다.
    3. 함수에 return 이 없거나 기본 자료형을 return하는 경우 this가 return된다.

묵시적으로 실행되는 부분을 코드로 표현하면 대략 아래와 같다.

function ObjectConstructor() {
  var this = Object.create(ObjectConstructor.prototype);

  // ... 사용자 정의 로직

  return this;
}

결과적으로 같은 함수를 이용해서 만들어진 객체는 같은 [[prototype]] 을 공유하게 된다. 객체의 [[prototype]]은 생성자 함수의 prototype 프로퍼티이기 때문에 prototype 프로퍼티에 값을 추가함으로서 같은 함수로 생성된 객체간에 값을 공유할 수 있다.