객체지향 class (ES5/ES6)

Class

객체를 생성하는 생성자 함수

js에서는 class가 생성자 함수 역할을 대신함

ES6에서 class 개념 추가

 

객체 생성 : object 생성법 / class 생성법

object 생성법 : 붕어빵을 하나하나 만드는 방법

class 생성법 : 붕어빵 틀을 만들어 틀을 이용해 붕어빵을 찍어내는 방법

 

object 생성법으로 객체 만들기

var potBung = {
   base : '밀가루';
   flavor : '팥';
}

var chouxBung = {
   base : '쌀가루';
   flavor : '슈크림';
}

var pizzaBung = {
   base : '튀김가루';
   flavor : '피자';
}
.
.
.

비슷한 객체를 만든다면 object 생성법은 하나하나 직접 작성을 해줘야 하는 단점이 존재한다.

 

 

다른 방법인 class 생성법으로 객체 만들기에 앞서 ES 버전에 따라 class를 생성하는 방법이 다르기 때문에 이 부분을 짚고 넘어가야 한다.

 

ES5와 ES6의 클래스 비교

 

ES5 

- 생성자

일반 함수가 new 연산자와 함께 호출 시 생성자 함수로써 동작

프로토타입 메서드 및 스태틱 메서드도 new 연산자와 함께 생성자 함수로써 사용 가능하다.

- 스태틱 메서드

생성자 함수에 바로 정의되는 메서드

- 프로토타입 메서드

생성자 함수의 prototype 내부에 할당되는 메서드

 

ES6

-생성자

class 키워드로 선언된 클래스의 본문 영역 내에 constructor 키워드를 통해 생성자를 정의한다.

프로토타입 메서드 및 스태틱 메서드는 new 연산자와 함께 생성자 함수로 사용하려고 하면 해당 함수는 constructor 가 아니라는 TypeError를 뱉어낸다.

- 스태틱 메서드

static이라는 키워드와 함께 선언되는 메서드

- 프로토타입 메서드

클래스의 본문 영역 내에 function이라는 키워드를 생략하더라고 모두 메서드로 인식하면서 constructor나 static이란 키워드가 없다면 자동으로 prototype 객체 내부에 할당된다.

 

 

- 프로토타입 메서드란

인스턴스가 프로토타입 체이닝을 통해 마치 자신의 것처럼 호출할 수 있는 메서드

- 스태틱 메서드란

생성장 함수(클래스) 자신만이 호출 가능한 메서드

 

 

class 생성법으로 객체 만들기

 

ES5

class 생성자 함수는 일반 함수와 구분을 위해 보통 대문자로 시작한다.

this가 존재함으로 function은 class 역할을 해줄 수 있다.

this는 class로부터 새로 생성되는 object들 즉, 생성자 함수 자신을 말한다.

function FishBunFrame(a, b){
  this.base = a;
  this.flavor = b;
}

var potBung = new FishBunFrame('밀가루', '팥')
console.log(potBung)      // fishBunFrame {base: "밀가루", flavor: "팥"}

var chouxBung = new FishBunFrame('쌀가루', '슈크림')
console.log(chouxBung)    // fishBunFrame {base: "쌀가루", flavor: "슈크림"}

 

ES6

-constructor

class의 instance를 생성하고 초기화하는 역할을 하며 클래스 안에서 하나만 존재할 수 있다.

클래스로부터 object를 만드는 역할을 한다.

class FishBunFrame{ 
  constructor(a, b){
    this.base = a;
    this.flavor = b;
  }
}

let potBung = new FishBunFrame('밀가루', '팥')
console.log(potBung)      // FishBunFrame {base: "밀가루", flavor: "팥"}

let chouxBung = new FishBunFrame('쌀가루', '슈크림')
console.log(chouxBung)    // FishBunFrame {base: "쌀가루", flavor: "슈크림"}

 

 

클래스 내의 메서드 사용

 

ES5

var ES5 = function (name) { // new 연산자와 호출 시 생성자 함수로써 동작
    this.name = name;
};
ES5.staticMethod = function () { // 스태틱 메서드
    console.log(this.name);
    return this.name + 'staticMethod';
};
ES5.prototype.method = function () { // 프로토타입 메서드
    return this.name + 'method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod()); // ES5 staticMethod
console.log(es5Instance.method()); // es5 method

// ES5의 프로토타입 메서드 및 스태틱 메서드는 new 연산자와 함께 생성자함수로써 사용할 수 있다.
var methodObj = new ES5.prototype.method();
var staticObj = new ES5.staticMethod();
console.log(methodObj); // ES5.method {}
console.log(staticObj); // ES5.staticMethod {}

 

ES6

var ES6 = class { // 클래스 본문 영역
    constructor (name) { // ES5의 생성자 함수와 동일한 역할
        this.name = name;
    } // 메서드와 다음 메서드 사이에는 콤마(,)로 구분하지 않음
    static staticMethod () { // static이라는 키워드를 통해 static 메서드임을 알림. 
        return this.name + ' staticMethod';
    }
    method () { // prototype 객체 내부에 할당되는 메서드. 
        return this.name + ' method';
    }
};
var es6Instance = new ES6('es6');
console.log(ES6.staticMethod()); // ES6 staticMethod
console.log(es6Instance.method()); // es6 method

// ES6의 프로토타입 메서드 및 스태틱 메서드는 생성자 함수로 사용할 수 없다.
var methodObj6 = new ES6.prototype.method();
var staticObj6 = new ES6.staticMethod();
console.log(methodObj6); // TypeError
console.log(staticObj6); // TypeError

 

 

부모 클래스로부터 상속

 

ES5 prototype 기반 상속

function Car(name) {
	this.name = name;
}
 
Car.prototype.honk = function() {
 	console.log('honk honk!')
}
  
 function Avante(name){
 	Car.call(this, name); // 이렇게 명시해 주어야 inastance의 this가 Car의 this를 바라본다.
 }
  
  // Car Class 상속
  Avante.prototype = Object.create(Car.prototype); // Car prorotype객체를 base로 Avante prototpye 생성
  Avante.prototype.constructor = Avante;  // Car prototype이 base이지만 constructor는 Avante임을 명시
  
  // drive() method override
  Avante.prototype.honk = function() {
  	Car.prototype.honk.call(this);
    console.log('beep beep!');
  };
  
  
  let avante1 = new Avante('avante1');
  avante1.honk();
  //output
  honk honk!
  beep beep!

 

ES6 class 기반 상속

extends 키워드를 통해 클래스를 상속할 수 있다.

subclass에 constructor가 있으면 this를 사용하기 전에 먼저 super()를 호출해야 한다.

super 키워드는 객체의 부모가 가지고 있는 함수들을 호출하기 위해 사용한다.

constructor의 내용이 부모의 것과 같으면 자식 클래스에서는 생략할 수 있다.

super 키워드 괄호 안에는 상속받는 값이 있을 경우에 명시해 준다.

class Car {
	constructor(name){
    this.name = name;
  }
  
  honk() {
  	console.log('honk honk!');
  }
}
// Car Class 상속
class Avante extends Car {	// extends 키워드로 상속을 구현함
	honk() {
    super.honk();	// super class의 constructor 호출
    console.log('beep beep!');
  }
}

let avante1 = new Avante('avante1');
avante1.honk();

//output
'honk honk!'	//line 13 super.honk()가 없으면 출력되지 않음
'beep beep!'

 

 

 

 

자바스크립트 ES5와 ES6의 클래스 문법 비교

ES6 Class 개념, ES5 vs.ES6 instantiation and inheritance

[TIL]Javascript - 객체지향 class (ES5/ES6)