JavaScript: Inheritance, Static Methods

Jene Hojin Choi·2021년 2월 12일
0

JavaScript

목록 보기
6/15
post-thumbnail
post-custom-banner

1. Inheritance

아래와 같이 Animal이라는 class를 만든다고 하자.

class Animal {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }
 
  get name() {
    return this._name;
  }
 
  get behavior() {
    return this._behavior;
  }
 
  incrementBehavior() {
    this._behavior++;
  }
} 

그렇다면 Animal의 하위 클래스로는 Cat, Dog 등이 있을 수 있다.
Cat, Dog 이라는 클래스들이 Animal의 속성들을 모두 받아올 수 있도록 하기 위해서는 Inheritance이 필요하다.

이때, Animal을 parent class, Cat 혹은 Dog를 child class / subclass 라고 한다.

2. extends, super()

클래스의 상속을 위해서는 다음의 두가지 키워드를 써야한다.

  • extends: parent class의 method, getters, setters 상속
  • super(property): parent class의 property 상속. 주로 child class의 constructor 안에 쓴다.

다음의 예시를 보자.

class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);
    this._usesLitter = usesLitter;
  }
}
  • extends라는 키워드는 Animal class의 모든 method를 Cat class안에서도 쓰일 수 있도록 해준다.

  • 하지만 Cat class도 새로 만들어진 class이니, 반드시 constructor가 필요하다.

  • super이라는 키워드는 parent class인 Animal class의 constructor를 호출한다. 여기서는 super(name)이 Cat class의 name을 Animal class의 constructor로 넘겨준다.

  • _usesLitter는 Cat class의 고유한 property이므로 지정해준다. (Animal class에는 없다)

  • child class의 constructor에서 유의할점:
    반드시super 다음에 this를 써야한다. super -> this

    안 이러면 에러가 난다!!!

3. Static Methods

static method이란 개별의 instance에서는 쓰일 수 없지만, class 안에서만 쓰일 수 있는 method를 말한다.

class Animal {
  constructor(name) {
    this._name = name;
    this._behavior = 0;
  }
 
  static generateName() {
    const names = ['Angel', 'Spike', 'Buffy', 'Willow', 'Tara'];
    const randomNumber = Math.floor(Math.random()*5);
    return names[randomNumber];
  }
} 

위의 Animal class에서 generateName()이라는 static method을 만들었다. 앞에 static 키워드가 있기 때문에, Animal class에서만 접근 가능할 것이다.

console.log(Animal.generateName()); 
// names array에 있는 이름중 하나를 리턴한다

아래와 같이 Animal class의 instance 중 하나를 통해 generateName()를 호출하려고 하면 에러가 난다.

const tyson = new Animal('Tyson'); 
tyson.generateName(); // TypeError
post-custom-banner

0개의 댓글