생성자(constructor) 메소드는 클래스가 오브젝트로 생성되고 초기되기 위한 특별한 메소드 입니다.

문법

 

constructor([arguments]) { ... }

 

설명

클래스에는 constructor라는 이름을 가진 특별한 메소드를 하나씩 가질 수 있습니다. 하나 이상의 생성자 메소드가 발견되면 SyntaxError 에러가 발생합니다.

생성자 메서드는 super 키워드를 사용하여 상위 클래스의 생성자 메소드를 호출할 수 있습니다.

만약 생성자 메소드를 저장하지 않을 경우, 기본 생성자 메소드가 사용됩니다.

예제

생성자constructor 메소드 사용하기

아래의 코드조각은 classes sample (live demo)에서 발췌하였습니다.

class Square extends Polygon {
  constructor(length) {
    // length로 다각형의 넓이와 높이를 정의하기 위해 부모클래스의 생성자를 호출합니다.
    super(length, length);
    // Note: 파생 클래스에서, 'this'를 사용하기 전에는 반드시 super()를
    // 호출하여야 합니다. 그렇지 않을 경우 참조에러가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  } 
}

다른예제

아래코드를 참고하세요

 

class Polygon {
    constructor() {
        this.name = "Polygon";
    }
}

class Square extends Polygon {
    constructor() {
        super();
    }
}

class Rectangle {}

Object.setPrototypeOf(Square.prototype, Rectangle.prototype);

console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true

let newInstance = new Square();
console.log(newInstance.name); //Polygon

여기서 Square 클래스의 프로토 타입이 변경되었지만 사각형의 새 인스턴스가 만들어 질 때 이전 기본 클래스 인 Polygon의 생성자가 호출됩니다.

기본 생성자

 

만약 생성자를 지정하지 않을 경우 기본 생성자 메소드가 사용됩니다. 기본적인 클래스의 기본 생성자 메소드는 :

constructor() {}

파생 클래스의 경우, 기본 생성자는 다음과 같습니다. :

constructor(...args) {
  super(...args);
}

명세서

명세 상태 설명
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Constructor Method' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Constructor Method' in that specification.
Draft  

브라우저 호환성

 

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 49
Notes
Full support 49
Notes
Notes From Chrome 42 to 48 strict mode is required. Non-strict mode support can be enabled using the flag "Enable Experimental JavaScript".
Edge Full support 13Firefox Full support 45IE No support NoOpera Full support 36Safari Full support 9WebView Android ? Chrome Android Full support YesEdge Mobile Full support 13Firefox Android Full support 45Opera Android ? Safari iOS Full support 9Samsung Internet Android Full support Yesnodejs Full support 6.0.0
Full support 6.0.0
Full support 4.0.0
Disabled
Disabled From version 4.0.0: this feature is behind the --use_strict runtime flag.
Full support 5.0.0
Disabled
Disabled From version 5.0.0: this feature is behind the --harmony runtime flag.

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

 

참고

문서 태그 및 공헌자

이 페이지의 공헌자: hyoni0817, limkukhyun, jeonnoej
최종 변경자: hyoni0817,