TIL day 8 Class 두번째

😛TD;LR

• Classes are templates for objects.
• Javascript calls a constructor method when we create a new instance of a class.
• Inheritance is when we create a parent class with properties and methods that we can extend to child classes.
• We use the extends keyword to create a subclass.
• The super keyword calls the constructor() of a parent class.
• Static methods are called on the class, but not on instances of the class.

1. Inheritance

여러 child class를 만들 때 child class에서 사용되는 공통적인 property와 method는 parent class에서 상속받아 만들 수 있다.

출처 codeacademy

Dog과 Cat class를 만들고 싶을 때 공통적으로 있는 name 및 behavior properties와 .incrementBehavior() method를 가지고 있는 parent class인 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++;
  }
} 

class Cat {
  constructor(name, usesLitter) {
    this._name = name;
    this._usesLitter = usesLitter;
    this._behavior = 0;
  }

  get name() {
    return this._name;
  }

  get behavior() {
    return this._behavior;
  }

  get usesLitter() {
    return this._usesLitter;
  }

  incrementBehavior() {
    this._behavior++;
  }
}

Cat class는 parent class인Animal class로부터 상속받아 작성 될 수 있다.

2. Subclass 생성

Parent class인 Animal class를 확장해서 subclass인 Cat을 생성할 수 있다.

class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);
    this._usesLitter = usesLitter;
  }
}

• extends 는 Animal class를 Cat class에서 사용가능하게 한다.
• Constructor()는 new Cat을 만들 때 argument인 name과 usesLitter를 가진다.
• super는 parent class의 constructor를 호출한다. super(name)은 Cat class에서 name을 가질 때 Animal class의 constructor로 적용할 수 있게한다.
• _usesLitter는 Cat class만의 새로운 property로 기존 constructor 작성과 동일하다.

super는 반드시 sub class의 첫줄에 작성해야한다.
그렇지 않으면 ※ reference error ※ 가 된다.

Cat class를 호출하는 방법은 기존 Object 방법과 같다.

const bryceCat = new Cat('Bryce', false); 
console.log(bryceCat._name); // output: Bryce

3. Subclass method

Subclass는 parent class의 getter, setter, method를 그대로 계승한다.

bryceCat.incrementBehavior(); 
// Call .incrementBehavior() on Cat instance.
console.log(bryceCat.behavior); 
// Log value saved to behavior. outpur: 1

Subclass 고유의 getter, setter, method 작성도 가능하며 기존 class 작성법과 방법은 같다.

class Cat extends Animal {
  constructor(name, usesLitter) {
    super(name);
    this._usesLitter = usesLitter;
  }

  get usesLitter() {
    return this._usesLitter;
  }
}

4. Inheritance 장점

1. 시간절약(Time saved)
2. 가독성(Readability)
3. 효율성(Efficiency)
4. code 수정이 용이함
   : multiple classes에서 property 나 method를 변경해야 할 때 parent class를 수정하면 된다.

5. Static Methods

Static Methods는 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];
  }
} 

static method인 .generateName()는 호출 시 무작위 이름을 반환한다. 이는 static keyword 때문으로 .generateName()가 오직 Animal 에 추가되어야만 .generateName()에 접근 할 수 있다.

console.log(Animal.generateName()); 
// returns a name

Animal class의 instance나 subclass의 instance에서는 .generateName()에 접근할 수 없다.

const tyson = new Animal('Tyson'); 
tyson.generateName(); // TypeError

TypeError가 나오는 이유는 subclass인 tyson에서 .generateName()에 접근 할 수 없기 때문이다.

출처 codeacademy