클래스 비교(ES5 vs ES6)

자바스크립트는 프로토타입 기반 언어이기 때문에

 

클래스 및 상속 개념은 존재하지 않지만

 

프로토타입을 기반으로 클래스와 비슷하게 동작하도록 도입되어 왔다.

 

> ES5

/* 생성자 함수 */
let ES5 = function (name) {
  this.name = name;
};
/* 스태틱 메서드 */
ES5.staticMethod = function () {
  return this.name + ' 스태틱 메서드!';
};
/* 프로토타입 메서드 */
ES5.prototype.method = function () {
  return this.name + ' 프로토타입 메서드!';
};

let instance = new ES5('es5');
console.log(ES5.staticMethod());   // 'es5 스태틱 메서드!'
console.log(instance.method());    // 'es5 프로토타입 메서드!'

 

> ES6

let ES6 = class {
  /* 생성자 함수 */
  constructor (name) {
    this.name = name;
  }
  /* 스태틱 메서드 */
  static staticMethod () {
    return this.name + ' 스태틱 메서드!';
  }
  /* 프로토타입 메서드 */
  method () {
    return this.name + ' 프로토타입 메서드!';
  }
};

let instance = new ES6('es6');
console.log(ES6.staticMethod());   // 'es6 스태틱 메서드!'
console.log(instance.method());    // 'es6 프로토타입 메서드!'

 

> ES6 상속 개념

/* 상위 클래스 */
let Rectangle = class {
  constructor (width, height) {         // 생성자 함수
    this.width = width;
    this.height = height;
  }
  getArea () {                          // 프로토타입 메서드
    return this.width * this.height;
  }
};

/* 하위 클래스 */
let Square = class extends Rectangle {  // 클래스 상속
  constructor (width) {
    super(width, width);                // super는 superClass의 constructor 실행
  }                                     // = Rectangle.call(this, width, width)
  getArea () {
    console.log(super.getArea());       // super는 SuperClass.prototype을 바라봄
  }
};

let instance = new Square(10);
instance.getArea();                     // 100