모던 자바스크립트

Class / Exntends

  • class 선언(declaration)은 프로토타입(원형) 기반 상속을 사용하여 주어진 이름으로 새로운 클래스를 만듭니다.
  • class 식(expression)을 사용하여 클래스를 정의할 수도 있습니다.

영상 강의

PART 1 클래스(Class) 문법을 사용한 JavaScript 객체 지향 프로그래밍 (Sugar Syntax)

PART 2 비공개(Private) 데이터 관리를 위한 방법들

PART 3 스코프 내 지역 변수 방법으로 비공개 데이터를 관리하면 안되는 이유

PART 4 서브 클래스(Sub Class) / 오버라이딩(Overriding)

PART 5 Object.setPrototypeOf() 메서드를 사용한 객체 상속

codepen



예제

기존 코드는 생성자 함수(constructor)를 만들고 프로토타입을 확장해서 프로퍼티를 추가하여 클래스를 구현했습니다.

function Person(name, age, gender) {
  this.name   = name;
  this.age    = age;
  this.gender = gender;
}

Person.prototype.incrementAge = function () {
  return this.age += 1;
};

그리고 다음과 같이 클래스를 상속했습니다.

function Personal(name, age, gender, occupation, hobby) {
  Person.call(this, name, age, gender);
  this.occupation = occupation;
  this.hobby = hobby;
}

Personal.prototype = Object.create(Person.prototype);
Personal.prototype.constructor = Personal;
Personal.prototype.incrementAge = function () {
  Person.prototype.incrementAge.call(this);
  this.age += 20;
  console.log(this.age);
};

class

ES6+ 부터는 이런 간단한 구현을 위해 편리한 문법을 제공합니다. 이제 클래스를 직접 만들 수 있습니다.

class Person {
  constructor(name, age, gender) {
    this.name   = name;
    this.age    = age;
    this.gender = gender;
  }
  incrementAge() {
    this.age += 1;
  }
}

extends

그리고 extends 키워드를 사용해서 상속할 수 있습니다.

class Personal extends Person {
  constructor(name, age, gender, occupation, hobby) {
    super(name, age, gender);
    this.occupation = occupation;
    this.hobby = hobby;
  }

  incrementAge() {
    super.incrementAge();
    this.age += 20;
    console.log(this.age);
  }
}

권장

클래스를 만들기 위한 ES6+의 문법은 내부적으로 어떻게 프로토타입으로 구현되는지 모호하지만, 초보자들에게 좋은 기능이고 더 깨끗한 코드를 작성하도록 도와줍니다.

참고

← Module →