ES6 Class 와 PseudoClassical 비교

기존 객체지향 프로그래밍 방식

 function Math(x, y, z){
  this.add = x + y + z
  this.mul = x * y * z
  this.sub = x - y - z
}

Math.prototype.result = function(){
  return `더하기:${this.add}, 곱하기:${this.mul}, 빼기:${this.sub} 입니다`
}

let math = new Math(1, 2, 3)

math.add // 6
math.mul // 6
math.sub // -4
math.result() // "더하기:6, 곱하기:6, 빼기:-4 입니다"

ES6 Class 버전

class Math {
  constructor(x, y, z){
   this.add = x + y + z
   this.mul = x * y * z
   this.sub = x - y - z
  }
  
  result(){
   return `더하기:${this.add}, 곱하기:${this.mul}, 빼기:${this.sub} 입니다`
  }
}

let math = new Math(1, 2, 3)

math.add // 6
math.mul // 6
math.sub // -4
math.result() // "더하기:6, 곱하기:6, 빼기:-4 입니다"

보이는 것처럼 결과가 같은 함수지만 ES6가 좀 더 간결하고 코드 가독성이 좋은 걸 알 수 있다
사실 저것만 보면 애매할 수 있으니 그러면 이번에는 클래스 상속과 다형성을 추가 해보자

PseudoClassical

//부모 클래스
function Com1(name, price){
  this.name = name
  this.price = price
  this.buy = function(){
    return `${this.name}을 ${this.price}에 샀다`
  }
}

//자식 클래스
function Com2(name, price, brand) {
  Com1.call(this, name, price)
  this.brand = brand
  this.buy = function(){
    return `${this.brand} ${this.name}을 ${this.price}에 샀다` 
  }
}

Com2.prototype = Object.create(Com1.prototype)
Com2.prototype.constructor = Com2

let com1 = new Com1('마우스','3만원')
let com2 = new Com2('키보드','로지텍','10만원')

com1 // {name: "마우스", price: "3만원"}
com2 // {name: "키보드", brand: "로지텍", price: "10만원"}
com1.buy() // "마우스을 3만원에 샀다"
com2.buy() // "로지텍 키보드을 10만원에 샀다"

ES6 Class

//부모 클래스
class Com1 {
  constructor(name, price){
    this.name = name
    this.price = price
  }
  
  buy(){
    return `${this.name}을 ${this.price}에 샀다`
  }
}

//자식클래스
class Com2 extends Com1 {
 constructor(name, brand, price){
    super(name, price)
    this.brand = brand
  }
  buy(){
    return `${this.brand} ${this.name}을 ${this.price}에 샀다`
  }
}

let com1 = new Com1('마우스','3만원')
let com2 = new Com2('키보드','로지텍','10만원')

com1 // {name: "마우스", price: "3만원"}
com2 // {name: "키보드", brand: "로지텍", price: "10만원"}
com1.buy() // "마우스을 3만원에 샀다"
com2.buy() // "로지텍 키보드을 10만원에 샀다"

오늘의 결론
그냥 ES6 클래스를 써라
(하지만 객체지향프로그밍을 이해하기 위한거라면 PseudoClassical 좋은거 같다)