ES5에서 클래스는 MyFunction.prototype에 인스턴스 메소드가 할당된 함수일 뿐이었습니다. ES6를 사용하면 보다 간단한 class 구문을 사용할 수 있습니다.

class는 인스턴스 함수, 정적 함수 및 상속을 제공합니다. 생성자는 클래스 인스턴스가 생성될 때마다 자동으로 호출되는 특수한 함수입니다. static 키워드를 사용하여 정적 클래스 함수를 선언할 수 있습니다.

[ class 사용하기 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Animal {
  constructor(name) {
    this.name = name
  }

  static beProud() {
    console.log('I AM AN ANIMAL')
  }

  printName() {
    console.log(this.name)
  }
}

const animal = new Animal('Cat')
animal.printName() // Cat
Animal.beProud() // I AM AN ANIMAL

[ 바벨로 컴파일된 코드 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Animal = function () {
  function Animal(name) {
    _classCallCheck(this, Animal);

    this.name = name;
  }

  _createClass(Animal, [{
    key: 'printName',
    value: function printName() {
      console.log(this.name);
    }
  }], [{
    key: 'beProud',
    value: function beProud() {
      console.log('I AM AN ANIMAL');
    }
  }]);

  return Animal;
}();

var animal = new Animal('Cat');
animal.printName(); // Cat
Animal.beProud(); // I AM AN ANIMAL

상속

class는 키워드 extends를 사용하여 상속할 수 있습니다. 부모로 부터 상속받은 클래스에서 우리는 super() 함수에 접근할 수 있습니다. 해당 하위 클래스의 상속된 함수 내에서 super는 상위 클래스의 해당 함수 버전을 호출합니다.

[ 상속 ]

1
2
3
4
5
6
class Cat extends Animal {
  printName() {
    super.printName()
    console.log(`My name is ${this.name}`)
  }
}

[ 바벨로 컴파일된 코드 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Cat = function (_Animal) {
  _inherits(Cat, _Animal);

  function Cat() {
    _classCallCheck(this, Cat);

    return _possibleConstructorReturn(this, (Cat.__proto__ || Object.getPrototypeOf(Cat)).apply(this, arguments));
  }

  _createClass(Cat, [{
    key: "printName",
    value: function printName() {
      _get(Cat.prototype.__proto__ || Object.getPrototypeOf(Cat.prototype), "printName", this).call(this);
      console.log("My name is " + this.name);
    }
  }]);

  return Cat;
}(Animal);

클래스 구문에 대한 자세한 내용은 클래스(class)에 대한 MDN 참조를 참조하십시오.