JS Reference

JS by Category JS by Alphabet

JavaScript

JS Array JS Boolean JS Classes JS Date JS Error JS Global JS JSON JS Math JS Number JS Operators JS RegExp JS Statements JS String

Window

Window Object Window Console Window History Window Location Window Navigator Window Screen

HTML DOM

DOM Document DOM Element DOM Attributes DOM Events DOM Event Objects DOM HTMLCollection DOM Style
alignContent alignItems alignSelf animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationTimingFunction animationPlayState background backgroundAttachment backgroundColor backgroundImage backgroundPosition backgroundRepeat backgroundClip backgroundOrigin backgroundSize backfaceVisibility border borderBottom borderBottomColor borderBottomLeftRadius borderBottomRightRadius borderBottomStyle borderBottomWidth borderCollapse borderColor borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderLeft borderLeftColor borderLeftStyle borderLeftWidth borderRadius borderRight borderRightColor borderRightStyle borderRightWidth borderSpacing borderStyle borderTop borderTopColor borderTopLeftRadius borderTopRightRadius borderTopStyle borderTopWidth borderWidth bottom boxShadow boxSizing captionSide caretColor clear clip color columnCount columnFill columnGap columnRule columnRuleColor columnRuleStyle columnRuleWidth columns columnSpan columnWidth counterIncrement counterReset cursor direction display emptyCells filter flex flexBasis flexDirection flexFlow flexGrow flexShrink flexWrap cssFloat font fontFamily fontSize fontStyle fontVariant fontWeight fontSizeAdjust height isolation justifyContent left letterSpacing lineHeight listStyle listStyleImage listStylePosition listStyleType margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth objectFit objectPosition opacity order orphans outline outlineColor outlineOffset outlineStyle outlineWidth overflow overflowX overflowY padding paddingBottom paddingLeft paddingRight paddingTop pageBreakAfter pageBreakBefore pageBreakInside perspective perspectiveOrigin position quotes resize right scrollBehavior tableLayout tabSize textAlign textAlignLast textDecoration textDecorationColor textDecorationLine textDecorationStyle textIndent textOverflow textShadow textTransform top transform transformOrigin transformStyle transition transitionProperty transitionDuration transitionTimingFunction transitionDelay unicodeBidi userSelect verticalAlign visibility width wordBreak wordSpacing wordWrap widows zIndex

Web APIs

API Console API Fullscreen API Geolocation API History API MediaQueryList API Storage

HTML Objects

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <tfoot> <th> <thead> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

Other References

CSSStyleDeclaration JS Conversion


자바스크립트 클래스 생성자


예시

Car 클래스를 만든 다음 Car 클래스를 기반으로 "mycar"라는 개체를 만듭니다.

class Car {
  constructor(brand) {  // Constructor
    this.carname = brand;
  }
}
mycar = new Car("Ford");

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.


정의 및 사용

메소드 는 constructor()클래스 내에서 생성된 객체를 생성하고 초기화하기 위한 특별한 메소드입니다.

constructor()메서드는 클래스가 시작될 때 자동으로 호출되며 정확한 이름이 "생성자"여야 합니다. 사실 생성자 메서드가 없으면 JavaScript는 보이지 않는 빈 생성자 메서드를 추가합니다.

참고: 클래스에는 두 개 이상의 생성자() 메서드가 있을 수 없습니다. 이것은 던질 것 SyntaxError입니다.

메서드를 사용하여 super()부모 클래스의 생성자를 호출할 수 있습니다(아래 "추가 예제" 참조).


브라우저 지원

constructor()ECMAScript6(ES6) 기능입니다.

ES6(JavaScript 2015)은 모든 최신 브라우저에서 지원됩니다.

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

constructor()Internet Explorer 11(또는 이전)에서는 지원되지 않습니다.


통사론

constructor(parameters)

기술적 세부 사항

자바스크립트 버전: ECMAScript 2015(ES6)

더 많은 예

클래스 상속을 생성하려면 extends 키워드를 사용하십시오.

클래스 상속으로 생성된 클래스는 다른 클래스의 모든 메서드를 상속합니다.

예시

"Car" 클래스에서 메서드를 상속할 "Model"이라는 클래스를 만듭니다.

class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

mycar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = mycar.show();

메서드 는 super()부모 클래스를 참조합니다.

생성자 메서드에서 메서드를 호출 super()하여 부모의 생성자 메서드를 호출하고 부모의 속성과 메서드에 액세스합니다.


관련 페이지

JavaScript 튜토리얼: JavaScript 클래스

JavaScript 튜토리얼: JavaScript ES6(EcmaScript 2015)

JavaScript 참조: extends 키워드

JavaScript 참조: 슈퍼 키워드