▶ JavaScript Classes

JavaScript Class Inheritance

JavaScript Class Inheritance: 상속 개념과 사용법

*JavaScript 클래스 상속(Inheritance)**은 **객체 지향 프로그래밍(OOP)**에서 재사용성과 유지보수성을 높이는 중요한 기능입니다. 상속을 사용하면 부모 클래스의 속성과 메서드를 자식 클래스에서 재사용하거나 확장할 수 있으며, 이를 통해 코드 중복을 줄이고 객체 간 계층 구조를 만들 수 있습니다.

이 가이드는 JavaScript에서 클래스 상속의 개념과 실용적인 사용법을 설명합니다.

1. 클래스 상속의 기본 개념

*상속(Inheritance)**은 자식 클래스가 부모 클래스의 속성과 메서드를 물려받아 재사용할 수 있도록 하는 기능입니다. extends 키워드를 사용하여 상속을 구현하며, 상속된 클래스는 필요에 따라 메서드 오버라이딩을 통해 재정의할 수 있습니다.

1.1. 클래스 상속 기본 구문

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

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

// 자식 클래스가 부모 클래스를 상속
class Child extends Parent {
    constructor(name, age) {
        super(name);  // 부모 클래스의 생성자 호출
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const child = new Child('Alice', 25);
child.greet();  // Hello, my name is Alice and I am 25 years old.

1.2. 주요 특징

extends 키워드를 사용하여 클래스 상속을 구현합니다.
*super()*는 부모 클래스의 생성자를 호출하며, 부모 클래스의 초기화 작업을 수행합니다.
메서드 오버라이딩을 통해 부모 클래스의 메서드를 자식 클래스에서 재정의할 수 있습니다.

2. `super()`를 사용한 부모 클래스 호출

*super()*는 부모 클래스의 생성자를 호출할 때 사용되며, 자식 클래스에서 부모 클래스의 속성을 상속받거나 메서드를 재사용할 수 있도록 해줍니다. 자식 클래스의 생성자에서 this를 사용하기 전에 반드시 **super()*를 호출해야 합니다.

2.1. `super()` 사용 예시

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

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);  // 부모 클래스의 생성자 호출
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex', 'Golden Retriever');
dog.speak();  // Rex barks.

*super(name)*는 부모 클래스의 생성자를 호출하여, name 속성을 초기화합니다.
*this*는 **super()*가 호출된 후에만 사용할 수 있습니다.
부모 클래스의 메서드도 super.methodName() 형식으로 호출할 수 있습니다.

3. 메서드 오버라이딩

메서드 오버라이딩은 자식 클래스에서 부모 클래스의 메서드를 재정의하는 것을 의미합니다. 상속된 클래스에서 동일한 이름의 메서드를 다시 정의하면, 자식 클래스의 메서드가 우선 호출됩니다.

3.1. 메서드 오버라이딩 예시

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

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

class Student extends Person {
    constructor(name, grade) {
        super(name);  // 부모 클래스의 생성자 호출
        this.grade = grade;
    }

    greet() {
        // 부모 클래스의 메서드 호출
        super.greet();
        console.log(`I am in grade ${this.grade}.`);
    }
}

const student = new Student('Bob', 10);
student.greet();
// Hello, my name is Bob.
// I am in grade 10.

*super.greet()*는 부모 클래스의 greet() 메서드를 호출합니다.
자식 클래스에서는 부모 클래스의 메서드를 확장하거나 새롭게 정의할 수 있습니다.

4. 상속에서 정적 메서드

*정적 메서드(static methods)**는 클래스 자체에 속하는 메서드로, 인스턴스가 아닌 클래스 이름을 통해 호출됩니다. 상속에서도 정적 메서드는 자식 클래스로 상속됩니다.

4.1. 정적 메서드 상속 예시

class Vehicle {
    static identify() {
        console.log('This is a vehicle.');
    }
}

class Car extends Vehicle {
    static identify() {
        super.identify();  // 부모 클래스의 정적 메서드 호출
        console.log('This is a car.');
    }
}

Car.identify();
// This is a vehicle.
// This is a car.

*super.identify()*는 부모 클래스의 정적 메서드를 호출합니다.
정적 메서드는 상속되어 자식 클래스에서도 호출할 수 있습니다.

5. 다중 상속과 믹스인(Mixins)

JavaScript는 단일 상속을 지원하지만, 믹스인(Mixin) 패턴을 사용하여 다중 상속과 유사한 동작을 구현할 수 있습니다. 믹스인은 여러 객체의 메서드를 한 클래스에 혼합하여 재사용하는 패턴입니다.

5.1. 믹스인 사용 예시

const CanFly = {
    fly() {
        console.log(`${this.name} is flying.`);
    }
};

const CanSwim = {
    swim() {
        console.log(`${this.name} is swimming.`);
    }
};

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

// 믹스인 적용
Object.assign(Bird.prototype, CanFly, CanSwim);

const bird = new Bird('Eagle');
bird.fly();   // Eagle is flying.
bird.swim();  // Eagle is swimming.

*Object.assign()*을 사용하여 믹스인을 클래스에 적용할 수 있습니다.
여러 객체의 메서드를 한 클래스에 혼합하여 다중 상속과 유사한 효과를 얻을 수 있습니다.

6. 상속과 인스턴스 확인

JavaScript에서는 instanceof 연산자를 사용하여 객체가 특정 클래스의 인스턴스인지 확인할 수 있습니다. 이는 상속 구조에서도 자식 클래스가 부모 클래스의 인스턴스임을 확인할 수 있습니다.

6.1. `instanceof` 사용 예시

class Animal {}
class Dog extends Animal {}

const myDog = new Dog();

console.log(myDog instanceof Dog);    // true
console.log(myDog instanceof Animal); // true

*myDog*는 Dog 클래스의 인스턴스일 뿐만 아니라, Animal 클래스의 인스턴스이기도 합니다.
*instanceof*는 상속 관계를 통해 객체의 타입을 확인할 수 있습니다.

7. 클래스 상속의 장점

7.1. 코드 재사용

상속을 통해 부모 클래스의 코드를 자식 클래스에서 재사용할 수 있습니다. 이는 코드 중복을 줄이고, 유지보수를 용이하게 만듭니다.

7.2. 계층 구조

상속을 통해 객체 간 계층 구조를 정의할 수 있습니다. 예를 들어, Animal 클래스는 **Dog*와 Cat 클래스의 공통 속성과 메서드를 정의할 수 있습니다.

7.3. 확장성

자식 클래스는 부모 클래스의 기능을 확장하거나 오버라이딩하여 더 구체적인 기능을 구현할 수 있습니다. 이를 통해 유연하고 확장 가능한 코드를 작성할 수 있습니다.

요약

JavaScript의 클래스 상속은 **객체 지향 프로그래밍(OOP)**에서 중요한 기능으로, 코드 재사용과 확장성을 가능하게 합니다.

extends 키워드를 사용하여 상속

을 구현하며, 자식 클래스는 부모 클래스의 속성과 메서드를 상속받습니다.

*super()*를 통해 부모 클래스의 생성자와 메서드를 호출할 수 있으며, 메서드 오버라이딩으로 부모 클래스의 메서드를 재정의할 수 있습니다.
정적 메서드도 상속되며, 자식 클래스에서 호출 가능합니다.
믹스인(Mixins) 패턴을 사용하여 다중 상속과 유사한 효과를 구현할 수 있습니다.

클래스 상속은 객체 계층 구조를 만들고 중복 코드를 줄이는 데 유용하며, JavaScript에서 강력한 객체 지향 프로그래밍을 구현하는 데 필수적인 도구입니다.

코딩 스쿨 JavaScript