#15. 자바스크립트(javascript) - 상속(Inheritance)과 오버라이딩(Overriding)

# 상속은 자식 클래스(서브 클래스)에서 부모클래스의 속성과 동작 등의 기능을 사용할 수 있도록 해줍니다.
# 부모 클래스에서 이미 정의된 함수 등을 자식 클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용할 수 있는데, 이를 Overriding이라고 합니다.

# 비전공자가 이해한 Javascript

 

---

상속(Inheritance)

객체 지향 프로그래밍에서 크게 3요소로 꼽는 캡슐화, 상속, 다형성 세 가지 중 상속을 말합니다.

상속은 객체들 간의 관계를 구축하는 방법입니다. 클래스로 객체가 정의되고 고전 상속에서, 클래스는 기반 클래스, 수퍼 클래스 또는 부모 클래스 등의 기존 클래스로부터 속성과 동작을 상속받을 수 있습니다. 그 결과로 생기는 클래스를 파생 클래스, 서브 클래스 또는 자식 클래스라고 부릅니다.

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

보통 부모와 자식 간의 유전, 상속이라고 하는 부분을 생각하시면 쉽습니다. 자식은 부모의 키와 외모, 성품, 재산 등을 물려받듯 자식 클래스는 부모 클래스의 기능을 물려받습니다.

프로그래밍에서의 상속에 대한 개념은 이렇게 잡아두고, 자바스크립트에서 이 상속을 어떻게 사용하는지 확인해보도록 하겠습니다.

 

---

 

1) 사용 방법

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

위의 코드는 앞으로 부모 클래스 역할을 할 클래스입니다.

• 처음 shape 클래스를 호출할 때 width, height, color를 받습니다.
• draw( ) 함수는 호출됐을 때 `drawing ${this.color} color of` 를 출력합니다. 여기서 this.color는 클래스 호출할 때 입력받은 값입니다.
• getArea( ) 함순느 호출됐을 때 width 값과 height 값을 곱해 반환합니다.

이제 이 shape 클래스를 상속 받을 자식 클래스를 만들어보도록 하겠습니다.

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

이번에는 Rectangle 이라는 클래스를 선언하면서 extends로 부모 클래스(shape)를 상속 받습니다. 자식 클래스(Rectangle)는 별도의 객체 선언이 없어도 부모로부터 상속받은 함수, 변수들을 그대로 사용할 수 있습니다.

---

 

2) Overriding (오버라이딩)

오버라이딩,(method overriding)은 자식 클래스가 자신의 부모 클래스들 중 하나에 의해 이미 제공된 함수 등을 특정한 형태로 구현하는 것을 말합니다. 부모 클래스에서 이미 정의된 함수 등을 자식 클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용한다고 생각하면 됩니다.

흔히 부모와 자식 사이에서 형제들이 유전적으로 물려받는 부분은 같아도 어떻게 먹고, 어떻게 자고, 어떻게 생활하냐에 따라 키, 외모, 공부 성적 등이 달라지듯 자식 클래스도 상속 받은 부모 클래스의 기능들을 어떻게 바꿔서 사용하는지에 따라 그 기능이 달라지게 됩니다. 그것을 프로그래밍에서는 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 했다고 할 수 있습니다.

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

 

---

 

3) Class checking: instanceOf

instanceOf는 A가 B의 instance인지 등에 대해 확인할 수 있는 연산자입니다.

**인스턴스(instance)는 객체 지향 프로그래밍에서 해당 클래스의 구조로 컴퓨터 저장공간에서 할당된 실체를 의미합니다.

위에서 사용된 클래스들을 이용해 아래와 같이 코드를 작성해보았습니다.

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

 

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

 

JavaScript | MDN