ES6 - Class(1)

1. Class란?

 

  클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로,

  객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

 

 

2. 기본 문법

  

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

 

  이렇게 클래스를 만들고, new MyClass()를 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

  객체의 기본 상태를 설정해주는 생성자 메서드 constructor()는 new에 의해 자동으로 호출되므로,  

  특별한 절차 없이 객체를 초기화 할 수 있다.

 

  *주의 사항 : 클래스와 관련된 표기법은 객체 리터럴 표기법과 차이가 있다. 클래스에선 메서드 사이에 쉼표를 넣지 않아도 된다.

 

 

3. 상속

 

  클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.

  기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있다.

  상속은 extends 라는 키워드를 사용해 구현할 수 있다.

 

class Animal {
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
  run(speed) {
    this.speed = speed;
    alert(`${this.name} 은/는 속도 ${this.speed}로 달립니다.`);
  }
  stop() {
    this.speed = 0;
    alert(`${this.name} 이/가 멈췄습니다.`);
  }
}
 
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} 이/가 숨었습니다!`);
  }
}
 
let rabbit = new Rabbit("흰 토끼");
rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

 

 

 

4. 메소드 오버라이딩, 생성자 오버라이딩

 

  개발을 하다 보면 부모 메서드 전체를 교체하지 않고, 부모 메서드를 토대로 일부 기능만 변경하고 싶을 때가 생긴다.

  부모 메서드의 기능을 확장하고 싶을 때도 있다. 이럴 때 커스텀 메서드를 만들어 작업하게 되는데,

  이미 커스텀 메서드를 만들었더라도 이 과정 전·후에 부모 메서드를 호출하고 싶을 때가 있다.

 

  키워드 super는 이럴 때 사용합니다.

 

4 - 1) 메소드 오버라이딩

class Animal {
 
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
 
  run(speed) {
    this.speed = speed;
    alert(`${this.name}가 속도 ${this.speed}로 달립니다.`);
  }
 
  stop() {
    this.speed = 0;
    alert(`${this.name}가 멈췄습니다.`);
  }
 
}
 
class Rabbit extends Animal {
  hide() {
    alert(`${this.name}가 숨었습니다!`);
  }
 
  stop() {
    super.stop(); // 부모 클래스의 stop을 호출해 멈추고,
    this.hide(); // 숨습니다.
  }
}
 
let rabbit = new Rabbit("흰 토끼");
 
rabbit.run(5); // 흰 토끼가 속도 5로 달립니다.
rabbit.stop(); // 흰 토끼가 멈췄습니다. 흰 토끼가 숨었습니다!

 

 

4 - 2) 생성자 오버라이딩

class Animal {
 
  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
 
  // ...
}
 
class Rabbit extends Animal {
 
  constructor(name, earLength) {
    super(name);
    this.earLength = earLength;
  }
 
  // ...
}

 

  super(...)는 this를 사용하기 전에 반드시 호출해야 합니다.

  자바스크립트는 '상속 클래스의 생성자 함수(derived constructor)'와 그렇지 않은 생성자 함수를 구분한다.

  상속 클래스의 생성자 함수엔 특수 내부 프로퍼티인 [[ConstructorKind]]:"derived"가 이름표처럼 붙는다.

  일반 클래스의 생성자 함수와 상속 클래스의 생성자 함수 간 차이는 new와 함께 드러난다.

 

• 일반 클래스가 new와 함께 실행되면, 빈 객체가 만들어지고 this에 이 객체를 할당합니다.
• 반면, 상속 클래스의 생성자 함수가 실행되면, 일반 클래스에서 일어난 일이 일어나지 않습니다. 상속 클래스의 생성자 함수는 빈 객체를 만들고 this에 이 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주길 기대합니다.

  이런 차이 때문에 상속 클래스의 생성자에선 super를 호출해 부모 생성자를 실행해 주어야 한다.

  그렇지 않으면 this가 될 객체가 만들어지지 않아 에러가 발생한다.

 

 

 

5. 정적 메소드와 정적 프로퍼티

 

  클래스 함수 자체에 메서드를 설정할 수도 있습니다. 이런 메서드를 정적(static) 메서드라고 부릅니다.

  정적 메서드는 클래스 안에서 static 키워드를 붙여 만들 수 있습니다.

 

class Article {
  constructor(title, date) {
    this.title = title;
    this.date = date;
  }
 
  static compare(articleA, articleB) {
    return articleA.date - articleB.date;
  }
}
 
// 사용법
let articles = [
  new Article("HTML", new Date(2019, 1, 1)),
  new Article("CSS", new Date(2019, 0, 1)),
  new Article("JavaScript", new Date(2019, 11, 1))
];
 
articles.sort(Article.compare);
 
alert( articles[0].title ); // CSS

 

  여기서 Article.compare는 article(글)을 비교해주는 수단으로, 글 전체를 ‘위에서’ 바라보며 비교를 수행한다. 

  Article.compare이 글 하나의 메서드가 아닌 클래스의 메서드여야 하는 이유가 여기에 있다.

 

  정적 프로퍼티도 물론 만들 수 있다.

  정적 프로퍼티는 일반 클래스 프로퍼티와 유사하게 생겼는데 앞에 static이 붙는다는 점만 다르다.

 

class Article {
  static publisher = "Ilya Kantor";
}

 

  

 

출처 : ko.javascript.info/classes