[JS] Class

📗 Class

- class는 함수의 한 종류이다.

- class 정의는 항상 "strict mode"다. 

- class 선언은 함수 선언과 달리 호이스팅의 대상이 아니다.

- 선언한 class는 재선언 할 수 없다.

- class의 메서드는 열거할 수 없다. : non-enumerable 

 

📗 constructor

- 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 생성자 메서드

- new에 의해 자동으로 호출되므로 특별한 절차 없이 객체를 초기화 할 수 있다.

- class 안에 한 개만 존재할 수 있다.

 

https://ko.javascript.info/class

클래스와 기본 문법

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// 클래스는 함수입니다.
alert(typeof User); // function

// 정확히는 생성자 메서드와 동일합니다.
alert(User === User.prototype.constructor); // true

// 클래스 내부에서 정의한 메서드는 User.prototype에 저장됩니다.
alert(User.prototype.sayHi); // alert(this.name);

// 현재 프로토타입에는 메서드가 두 개입니다.
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

 

1. User라는 이름을 가진 함수를 만듭니다. 함수 본문은 생성자 메서드 constructor에서 가져옵니다. 생성자 메서드가 없으면 본문이 비워진 채로 함수가 만들어집니다.
2. sayHi같은 클래스 내에서 정의한 메서드를 User.prototype에 저장합니다.

new User를 호출해 객체를 만들고, 객체의 메서드를 호출하면 함수의 prototype 프로퍼티에서 설명한 것처럼 메서드를 prototype 프로퍼티를 통해 가져옵니다. 이 과정이 있기 때문에 객체에서 클래스 메서드에 접근할 수 있습니다.

함수의 prototype 프로퍼티

 

 

📗 class 상속 - extends, super

📗 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} 이/가 멈췄습니다.`);
  }
}

let animal = new Animal("동물");

class Rabbit extends Animal {
  hide() {
    alert(`${this.name} 이/가 숨었습니다!`);
  }
}

let rabbit = new Rabbit("흰 토끼");

rabbit.run(5); // 흰 토끼 은/는 속도 5로 달립니다.
rabbit.hide(); // 흰 토끼 이/가 숨었습니다!

- extends를 사용하여 Animal 메서드를 상속받아 사용할 수 있다.

- Rabbit에서 Animal에 있는 메서드를 오버라이딩 할 수 있다. 만약 덮어쓰고 난 후 다시 Animal에 있는 메서드가 필요하다면 super를 사용하면 된다.

 

📗 super

- super.method는 부모 클래스에 정의된 메서드를 호출한다.

- 자식 생성자 내부에서만 사용할 수 있다.

 

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(); // 흰 토끼가 멈췄습니다. 흰 토끼가 숨었습니다!

📕 상속 클래스의 생성자에서 this를 사용하기 전에 반드시 super를 호출해야한다. 그렇지 않으면 에러가 발생한다. 

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

  hide() {
    alert(`${this.name} 이/가 숨었습니다!`);
  }
}

Rabbit에서 name, earLength를 지정하는 속성을 넣으면 오류가난다. -> super를 호출하지 않아서

 

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

1. 일반 클래스가 new와 함께 실행되면, 빈 객체가 만들어지고 this에 이 객체를 할당한다. 

2. 상속 클래스의 생성자 함수가 실행되면, 상속 클래스의 생성자 함수는 빈 객체를 만들고 this에 이 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주길 기대한다.

 

- 이런 차이 때문에 상속 클래스의 생성자에서는 super를 호출해 부모 생성자를 실행해 주어야 한다. 그렇지 않으면 this가 될 객체가 만들어지지 않아 에러가 발생하게 된다.

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  // ...
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    super(name);
    this.earLength = earLength;
  }

  // ...
}

// 이제 에러 없이 동작합니다.
let rabbit = new Rabbit("흰 토끼", 10);
alert(rabbit.name); // 흰 토끼
alert(rabbit.earLength); // 10

 

출처 및 참고

https://ko.javascript.info/class-inheritance

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class

https://uiyoji-journal.tistory.com/101