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

ES6 Class 파헤치기 라는 글을 읽고 참고해서 다시 정리해 보았다. 좋은 글 감사합니다.

ES6 class constructor super()  

---

Class

• JavaScript Class는 ECMAScript 6에서 소개되었다.
• Class 도 함수다. 함수를 선언식과 표현식으로 정의하는 것처럼 Class도 두 가지로 정의할 수 있다.
• instance의 속성은 반드시 class method 내에 정의되어야 한다.

 

Class 선언식

• 함수 선언과 클래스 선언의 중요한 차이점은 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다는 것이다.
• 클래스를 사용하기 위해서는 클래스를 먼저 선언 해야 하며, 그렇지 않으면 ReferenceError가 발생한다.

class Car {
  constructor(band, name){
    this.brand = brand;
    this.name = name;
    }
    drive() {
      console.log(this.name + ' is driving now.')
    }
 }
    

 

클래스를 선언하기 전에 'new Car()' 처럼 instance를 먼저 생성하면 ReferenceError가 발생한다.

 

 

Class 표현식

let Car = class Car {	// 표현식은 이름을 가지지 않을 수도 있다.
  constructor(brand, name){
    this.brand = brand;
    this.name = name;
  }
  drive() {
  	console.log(this.name + ' is driving now.');
  }
}

 

 

Constructor

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

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

let avante = new Car('hyundai', 'avante');

new Car() 코드를 실행하면 Car.prototype.constructor가 호출되어서 'hyundai', 'avante'를 파라미터로 넘겨주게 된다.

 

 

---

prototype 기반 상속 vs. Class 기반 상속 ( ES 5 vs. ES 6)

 

1. prototype 기반 상속 (ES5)

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!
  
  
  

 

2. Class 기반 상속 (ES 6)

• extends 키워드를 통해 클래스를 상속할 수 있다.(sub classing)
• subclass에 constructor가 있으면 this를 사용하기 전에 먼저 super()를 호출해야 한다.
• 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!'

• constructor의 내용이 부모의 것과 같으면 자식 클래스에서는 생략할 수 있다.
• super 키워드 괄호 안에는 상속받는 값이 있을 경우에 명시해 준다.

 

---

 

Polymorphism : 다형성

: when a method inherited from a base class is redefined.

superclass에서 이미 정의된 값도 출력하고 subclass에서 새로 정의한 것도 출력하고 싶은 경우

 

 - 대표적으로 overloading, overriding이 있다.

 

Overriding

: 부모-자식 상속 관계에서만 가능하며, 부모 클래스에 있는 매서드를 자식 클래스에서 재정의해서 사용하는 것을 의미한다.

 

 

1. pseudoclassical pattern

function Human(name){
  this.name = name;
}

Human.prototype.sleep = function(){
  console.log('zzz');
}

function Student(name){
  Human.apply(this, name);
}
Student.prototype.sleep = function() {
  Human.prototype.sleep.apply(this);	//Human과 Student에 있는 각 메소드를 같은 context가 공유
  console.log('wake up!');
}

 

 

2. ES 6 Class 활용

class Human {
  constructor(name) {
    this.name = name;
  }
  sleep() {
    console.log('zzz');
  }
}

class Student extends Human {
  sleep(){
    super.sleep();
      console.log('wake up');
  } 
}

let steve = new Student('steve')
steve.sleep()

//ouput
zzz
wake up!