상속

상속은 자식 클래스(서브 클래스)에서 부모클래스의 속성과 동작 등의 기능을 사용할 수 있도록 해줍니다. 자식 클래스에서 부모 클래스의 함수를 불러서 사용하거나 변수들을 불러 사용할 수 있습니다.

JS에서 상속을 구현하는 방법은 3가지가 있다.

1. Bridge 만들어 상속하기
2. Object.create를 사용하는 방법
3. class의 extends를 사용하는 방법

class의 extends를 사용하는 방법

가장 대표적으로 많이 사용하는 방법

// 부모
class shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return this.width * this.height;
  }
}

const parent_class = new shape(10, 10, 'black');
console.log(parent_class.draw());     // drawing black color of
console.log(parent_class.getArea());  // 100

// 자식
class Rectangle extends shape {}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();                   // drawing blue color of
console.log(rectangle.getArea());   // 400
console.log(rectangle.width);       // 20

Overriding

오버라이딩 : 자바스크립트 객체의 상속받은 부모의 메소드를 재정의하는 것을 의미합니다.
즉, 부모 클래스에서 이미 정의된 함수 등을 자식 클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용하는 것!

class Triangle extends shape {
  // overiding
  draw() {
    super.draw();
    console.log('🔺');
  }
  
  getArea() {
    return (this.width * this.height) / 2; 
  }

  // Object를 상속받았기 때문에 toString을 사용할 수 있음
  toString() {
    return `Triangle: color: ${this.color}`;
  }
}


const triangle = new Triangle(20, 20, 'red');
triangle.draw();                    // drawing red color of 🔺
console.log(triangle.getArea());    // 200
console.log(triangle.toString());   // Triangle: color: red

위에서 작성했던 Rectangle 클래스(자식 클래스)와는 다르게 Triangle 클래스(자식 클래스)는 shape 클래스(부모 클래스)를 상속받고 내용을 작성했습니다. 부모 클래스에서 이미 작성되어져 있는 draw( ) 함수를 다시 작성했습니다.

draw( ) 함수에서 super.draw( ) 는 슈퍼 클래스(= 부모 클래스)를 불러와 슈퍼 클래스의 draw( ) 함수를 사용하겠다는 의미입니다.
부모 클래스(shape)의 draw( ) 함수를 불러오는데, 초반에 정의했던 부모 클래스에서 draw( ) 함수는 "console.log(drawing ${this.color} color of);" 입니다. 따라서 자식 클래스의 draw( ) 함수를 호출하면

console.log(drawing ${this.color} color of);
console.log('🔺');

를 차례로 호출해 " drawing red color of 🔺"를 출력합니다.
getArea( ) 함수에서는 기존의 getArea( ) 함수를 오버라이딩 해서 " (넓이 * 높이) / 2 " 값을 반환했습니다.
toString( ) 함수는 자식 클래스에만 새롭게 추가된 함수입니다. 새롭게 추가된 함수에서도 부모 클래스의 object(this.color)를 물려받아 사용할 수 있습니다.

toString( ) 은 이미 javascript에 정의되어 있는 함수입니다. 모든 클래스는 javascript에서 이미 정의된 object 클래스(toString( ) 등)를 상속받습니다. 따라서 이 toString( ) 함수도 Overriding 했다고 할 수 있습니다.

상속은 클래스를 사용하는데 편의성을 더해줍니다. 같은 코드를 반복해서 사용하지 않고 클래스를 상속해서 사용하기 때문에 효율적입니다.