새 키워드

new로 함수를 호출하면 호출된 함수를 객체의 '생성자'로 사용하여 새 객체를 만듭니다.

function MyFunction() {}
const myObject = new MyFunction();

typeof myObject;
> "object"`

이를 통해 '생성자 함수'는 동일한 구조 패턴을 따르는 객체를 만들기 위한 템플릿을 제공할 수 있습니다.

function MyFunction() {
  this.myProperty = true;
}
const myObject = new MyFunction();

myObject.myProperty;
> true

생성자 함수 내의 this 값은 생성되는 객체를 참조하므로 생성 시 객체에 속성과 메서드로 채워집니다. 이를 통해 데이터 값이 포함된 객체와 해당 데이터를 단일 이동식 단위로 처리하는 데 필요한 메서드('캡슐화')를 만들 수 있습니다.

function MyFunction( myArgument ) {
    this.myValue = myArgument;
    this.doubleMyValue = () => myArgument * 2;
}
const myObject = new MyFunction( 10 );

myObject.myValue;
> 10

myObject.doubleMyValue();
> 20

this는 함수의 현재 실행 컨텍스트를 나타냅니다. 즉, 생성자 함수는 다른 함수와 마찬가지로 this 값에 대해 동일한 규칙을 따릅니다. 예를 들어 생성자로 의도된 함수는 독립적으로 호출되는 경우 this 값에 전역 결합을 사용합니다.

function MyFunction() {
    console.log( this  );
}
const myObject = new MyFunction();
> MyFunction { }

MyFunction(); // Global `this` binding outside of strict mode is `globalThis`
> Window { … }

(function() {
    "use strict";
    function MyFunction() {
            console.log( this );
    }
    MyFunction();  // Global `this` binding inside of strict mode is `undefined`
}());
> undefined

자바스크립트의 내장 팩토리 함수에서 설정한 이름 지정 패턴에 따라 생성자 함수 식별자의 첫 번째 문자를 대문자로 표기하는 것이 일반적입니다. 용어를 서로 바꿔서 사용할 수 있는 경우도 있지만, 생성자 함수는 new 키워드로 호출될 때 새로 구성된 객체에서 작동하기 위한 함수인 '팩토리 함수'와 다릅니다. '팩토리 함수'는 정상적으로 호출될 때 객체를 명시적으로 return합니다.

function myFunction( myArgument = false ) {
  return { "myProperty" : myArgument };
}
const myObject = myFunction( true );

myObject;
> Object { myProperty: true }

기본 원칙은 동일하지만 맞춤 생성자 함수의 사용 사례는 ES6에 도입된 더 많은 기능을 갖춘 Class 구문을 사용하는 것이 더 좋습니다.