[타입스크립트] OOP 다형성, 상속 개념 확실하게 정리

다형성

 

• 정의 : 다형성이란 하나의 이름(방법)으로 많은 상황에 대처하는 기법이다.
• 효과 : 개념적으로 동일한 작업을 하는 함수들에 똑같은 이름을 부여할 수 있으므로 코드가 더 간단해지는 효과가 있습니다.

 
이를 통해 코드의 재사용, 코드 길이 감소가 되어 유지보수가 용이하도록 도와준다.

 

 

위의 설명을 조금 더 풀어 설명하자면, 아래와 같다.

다형성은 [상속]에서 비롯되는 큰 장점이라고 생각하면 쉽다. 다형성은 상속을 통해 동일 이름임에도 그 기능을 변경하는 것을 가능하게 해준다. 다형성 : 같은 이름을 불렀는데  다른 형상을 하는 것(같은 동작이지만 다른 과정과 결과가 나옴)

 

[클래스 상속]

extends

클래스 상속을 잘 이용하면 공통적인 기능은 그대로 재사용하면서,

자식클래스에서만 조금 더 자식클래스에 특화된 기능들을 할 수 있고, 추가할 수도 있다. (오버라이딩)

그리고 super라는 키워드를 이용해서 부모 클래스에 있는 함수들을 호출하거나 접근할 수도 있다.

 

[인터페이스 구현]

implements

인터페이스 구현을 잘 이용하면 같은 이름을 가진 함수들을 다양한 클래스들이 가질 수 있게 되고,

이름 호출에 대하여 다른 구현방식을 꾀할 수 있게 된다.

---

다형성(의 특장점)이란, '하나의 인터페이스를 구현' 또는 '같은 부모의 클래스를 상속'한 자식클래스들이,

공통 인터페이스 혹은 같은 부모 클래스에 있는 함수들을 다른 방식으로 다양하게 구현할 수 있는 것을 말한다!!!

• 다형성이란 하나의 이름(방법)으로 많은 상황에 대처하는 기법.
• 개념적으로 동일한 작업(이지만 내부의 세부 작업들은 각자 다른)을 하는 함수들(분명 이름은 같지만 다 다른 클래스 출신인)
• 이 API를 공통이름으로 호출하면 클래스들이 같은 개념일지라도 섬세하게 다른 동작들을 하는 Magin-
• 효과 : 코드가 더 간단해짐

이렇게 정리하면 된다.

모두에게 같은 이름의 함수를 불러도 다 다른 행동을 한다 -> 즉, 각각을 정의할 필요가 없어지니 API가 간소화되고 복잡성은 줄어든다. 

---

 

  

이렇게 공통 인터페이스 혹은 같은 부모 클래스에 있는 함수를 호출하는 과정에서,

개발자는 각 클래스들의 세부적인 내부 구현사항을 신경쓰지 않고 공통 API만을 보고 뽑아 쓸 수 있게 되니 사용시에도 간편함을 느낄 수 있다.

 

 

 

<다형성 예시1>

예를 들면, 동물 클래스에 울음() "cry"

고양이 클래스에 울음(): 오버라이딩 "냐옹"

강아지 클래스에 울음(): 오버라이딩 "엉엉멍멍"

같은 "울음" 속성임에도 실제 울음소리는 다르게 구현된다.

 

OOP에서 다형성의 개념을 녹여내는 방법은, 오버라이딩(Overriding)과 오버로딩(Overloading)이다.

• 오버라이딩
  - 부모 클래스에서 상속받은 자식 클래스에서 부모클래스에서 만들어진 메서드를 자식 클래스에서 자식 클래스 특징에 맞게 재정의해서 사용하는 것
• 오버로딩
  - 같은 이름의 메서드를 사용하지만 메서드마다 다른 용도로 사용되며 그 결과물도 다르게 구현할 수 있게 만드는 개념
  • 오버로딩이 가능하려면 메서드끼리 이름은 같지만 매개변수의 갯수나 데이터 타입이 다르면 오버로딩이 적용

 

 

 

상속

(자바스크립트 정리 자료인데 겹치는 얘기라서 여기 복붙합니다.)

 

 

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.

기존에 존재하던 기능을 토대로 새로운 기능을 만들 수 있다.

키워드 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;
  }
}

class Rectangle extends Shape {}
const rectangle1 = new Rectangle(20, 20, "blue");
rectangle1.draw(); //drawing blue color

const rectangle2 = new Rectangle(10, 50, "pink");
rectangle2.draw(); //drawing pink color​

상속 후 오버라이딩

shape라는 class를 사각형과 삼각형에 상속하되,

각각의 특성을 고려한 오버라이딩

<케이스 1 : 함수 내용을 아예 바꾼다.>

 

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;
  }
}

class Rectangle extends Shape {}

const rectangle1 = new Rectangle(20, 20, "blue");
console.log(rectangle1.getArea()); //400

const rectangle2 = new Rectangle(10, 50, "pink");
console.log(rectangle2.getArea()); //500


class Triangle extends Shape {
//필요한 함수만 재정의 해서 쓴다 (오버라이딩)
  getArea() {
    return (this.width * this.height) / 2;
  }
}
const triangle1 = new Triangle(20, 20, "orange");
console.log(triangle1.getArea()); //200

const triangle2 = new Triangle(10, 50, "skyblue");
console.log(triangle2.getArea()); //250​

<케이스 2 : 부모에 정의된 함수도 부르고 싶다면 super.메소드명() >

class Shape {
  constructor(width = "2", height = "2", color = "white") {
    this.width = width;
    this.height = height;
    this.color = color;
  }
  draw() {
    console.log(`drawing ${this.color} color`);
  }
  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {
  draw() {
    console.log("﹮");
  }
}
const rectangle = new Rectangle(10, 10, "red");
rectangle.draw(); //﹮

class Triangle extends Shape {
  draw() {
    super.draw();
    console.log("∆");
  }
  getArea() {
    return (this.width * this.height) / 2;
  }
}
const triangle = new Triangle(10, 5, "yellow");
triangle.draw();    //drawing yellow color
                    //∆

생성자 오버라이딩

 

일반 클래스의 생성자 함수와 상속 클래스의 생성자 함수 간 차이는 new와 함께 드러난다.

• 일반 클래스가 new와 함께 실행되면, 빈 객체가 만들어지고 this에 이 객체를 할당한다.
• 반면, 상속 클래스의 생성자 함수가 실행되면, 일반 클래스에서 일어난 일이 일어나지 않는다. 상속 클래스의 생성자 함수는 빈 객체를 만들고 this에 이 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주길 기대한다.

이런 차이 때문에 상속 클래스의 생성자에선 super를 호출해 부모 생성자를 실행해 주어야 한다. 그렇지 않으면 this가 될 객체가 만들어지지 않아 에러가 발생

아래 예시와 같이 this를 사용하기 전에 super()를 호출하면 Rabbit의 생성자가 제대로 동작합니다.

 

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }
}

class Rabbit extends Animal {

  constructor(name, earLength) {
    super(name);
    this.earLength = earLength;
  }
}

// 이제 에러 없이 동작
let rabbit = new Rabbit("흰 토끼", 10);
console.log(rabbit.name); // 흰 토끼
console.log(rabbit.earLength); /