[JS] Class Ingeritance (클래스 상속)

1. Class 상속과 다양성

class의 반복되는 공통적인 속성들을 한번만 정의하고 (parent class),

extends 키워드를 이용하여 class의 property나 method를 추가 정의할 수 있다 (child class).

이것을 class 상속 또는 class 확장 이라고 한다.

child class는 parent class의 field와 method를 복사없이 모두 사용할 수 있고,

필요한 property나 method를 추가 또는 오버라이딩 할 수 있다.

 

class 상속의 기본 문법 :

 

class ChildClass extends ParentClass { }

 

Parent Class

 

class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

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

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

 

Child Class

 

class Rectangle extends Shape {}

class Triangle extends Shape {
  draw() {
    super.draw();  // 오버라이딩 해도 부모 class의 method 호출
    console.log('🔺');  
  }
  getArea() {
    return this.width * this.height / 2  // 필요한 부분을 오버라이딩해서 재사용
  }
}

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

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

 

 

super 키워드를 이용해서 parent class에 정의된 method를 호출할 수 있다.

 

super.ParentClassMethod( );

 

2. Class checking: instanceOf

 

object가 해당 class로 만들어진 것 인지 확인할 수 있다.

 

console.log(rectangle instanceof Rectangle);  // true
console.log(triangle instanceof Rectangle);  // false
console.log(triangle instanceof Triangle);  // true
console.log(triangle instanceof Shape);  // true
console.log(triangle instanceof Object);  // true

 

JavaScript 의 모든 obect class 들은 JavaScript의 Object를 상속받아 만들어진다.

그래서 Object에 존재하는 모든 method를 사용 할 수 있다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

JavaScript reference - JavaScript | MDN

JavaScript 내부에 포함된 object를 확인 할 수 있다.

 

 

 

 

 

이 포스팅은 개인 공부를 목적으로 작성된 글입니다.

내용 출처 : 드림 코딩 by 엘리