자바스크립트 Class의 상속과 다형성 이해하기

  자바스크립트의 class 문법은 ES6(ES2015)에서 도입되었으며, 객체 지향 프로그래밍을 좀 더 명확하고 간결하게 구현할 수 있도록 설계되었습니다. 자바스크립트의 클래스 상속은 객체 지향 프로그래밍의 핵심 개념 중 하나로, 한 클래스(부모 클래스)의 속성과 메서드를 다른 클래스(자식 클래스)가 상속 받아 사용할 수 있게 합니다. 이를 통해 코드의 재사용성을 높이고, 복잡성을 관리할 수 있습니다.

클래스 기본 구조

class ClassName {
  constructor(arg1, arg2) {
      this.property1 = arg1;
      this.property2 = arg2;
  }

  method1() {
      // ...
  }

  method2() {
      // ...
  }
}

• constructor : 클래스로부터 객체를 생성할 때 호출되는 특별한 메서드입니다. 객체의 초기화에 사용됩니다. 
• 메서드 : 클래스 내부에 정의된 함수입니다. 객체의 행동을 정의합니다. 
• this키워드 : 생성된 객체를 가리키는 참조자입니다. 클래스 내부에서 메소드끼리 소통하기 위해서는 this가 필요합니다. 

클래스 상속

  자바스크립트에서 클래스 상속은 extends 키워드를 사용하여 구현합니다. 자식 클래스는 부모 클래스의 모든 속성과 메서드를 상속 받습니다. 

class Parent {
  constructor(name) {
      this.name = name;
  }

  greet() {
      return `Hello, my name is ${this.name}`;
  }
}

class Child extends Parent {
  constructor(name, age) {
      super(name); // 부모 클래스의 생성자(constructor)나 메서드를 호출할 때 사용
      this.age = age;
  }

  sayAge() {
      return `And I'm ${this.age} years old.`;
  }
}

다형성(Polymorphism)

  다형성은 객체가 여러 형태를 가질 수 있는 성질을 의미합니다. 자바스크립트에서는 상속을 통해 다형성을 구현할 수 있습니다. 자식 클래스에서 부모 클래스의 메서드를 재정의(오버라이딩)함으로써, 같은 이름의 메서드가 다른 행동을 할 수 있도록 하는 것입니다.

class Parent {
  speak() {
      return "I am parent";
  }
}

class Child extends Parent {
  speak() {
      return "I am child";
  }
}

let parent = new Parent();
let child = new Child();

console.log(parent.speak()); // "I am parent"
console.log(child.speak());  // "I am child"

상속과 다형성의 장점

• 코드 재사용성: 기존 클래스의 코드를 재사용하여 새로운 클래스를 만들 수 있습니다.
• 유지보수 용이성: 중복 코드를 줄이고, 변경 사항을 한 곳에서 관리할 수 있습니다.
• 확장성: 기존 코드를 변경하지 않고, 새로운 기능을 추가할 수 있습니다.

주의사항

• 클래스 상속은 계층적 구조를 만들기 때문에, 너무 많은 계층은 관리가 복잡해질 수 있습니다.
• 오버라이딩을 할 때는 부모 클래스의 메서드 기능을 정확히 이해하고 사용해야 합니다.