자바스크립트 - 상속

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 자바스크립트의 마법적인 상속 세계에서 흥미로운 여정을 시작할 것입니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요; 저는 당신의 친절한 안내자가 되겠습니다. 이 개념을 단계별로 탐구해 보겠습니다. 그러니 가상의 지팡이(키보드)를 쥐고, 함께 뛰어들어 보세요!

JavaScript - Inheritance

자바스크립트에서의 상속

상속은 프로그래밍의 세계에서 가족 특성을 내려받는 것과 같습니다. 객체의 가족 트리를 만들어, 자식들이 부모로부터 속성과 메서드를 상속받을 수 있다고 상상해 보세요. 멋지죠?

간단한 예제를 시작해 보겠습니다:

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

speak() {
console.log(`${this.name}는 소리를 내는다.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name}는 짖는다: 와우 와우!`);
}
}

const myDog = new Dog("Buddy");
myDog.speak(); // 출력: Buddy는 소리를 내는다.
myDog.bark();  // 출력: Buddy는 짖는다: 와우 와우!

이 예제에서 Dog은 Animal에서 상속받습니다. 이는 Dog이 Animal의 모든 속성과 메서드를 얻고, 자신만의 독특한 메서드 bark()를 가지는 것을 의미합니다. Buddy는 모든 동물의 말하기 능력을 상속받았지만, 자신만의 특별한 짖는 능력도 가지고 있습니다!

자바스크립트 단일 클래스 상속

단일 클래스 상속은 클래스가 단일 부모 클래스에서 상속받는 것입니다. 한 명의 매우 멋진 부모님으로부터 모든 것을 배우고 싶어하는 것과 같습니다.

다른 예제를 보겠습니다:

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`${this.brand}를 시작합니다.`);
}
}

class Car extends Vehicle {
honk() {
console.log(`${this.brand} 차는 비프 비프 소리를 낸다!`);
}
}

const myCar = new Car("Toyota");
myCar.start(); // 출력: Toyota를 시작합니다.
myCar.honk();  // 출력: Toyota 차는 비프 비프 소리를 낸다!

여기서 Car은 Vehicle에서 상속받습니다. 차는 차의 일반 개념에서 시작하는 법을 배우지만, 차로서는 징징 소리를 내는 법을 알고 있습니다!

자바스크립트 super() 키워드

이제 super() 키워드에 대해 이야기해 보겠습니다. 부모님께 깊은 경의를 표하는 것처럼, 부모님의 기여를 인정하는 것입니다.

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

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

introduce() {
console.log(`저는 ${this.name}, ${this.breed} 개입니다.`);
}
}

const myDog = new Dog("Max", "Labrador");
myDog.introduce(); // 출력: 저는 Max, Labrador 개입니다.

Dog 생성자에서의 super(name) 호출은 "안녕하세요 부모님, 이름을 설정해 주실 수 있나요?"라고 물어보는 것과 같습니다. 부모의 생성자 로직을 재사용하는 방법입니다.

자바스크립트 다단계 상속

다단계 상속은 가족 트리에서 여러 세대가 있는 것처럼 합니다. 예제를 보겠습니다:

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

eat() {
console.log(`${this.name}는 먹는다.`);
}
}

class Dog extends Animal {
bark() {
console.log(`${this.name}는 짖는다!`);
}
}

class Labrador extends Dog {
swim() {
console.log(`${this.name}는 수영한다.`);
}
}

const myDog = new Labrador("Charlie");
myDog.eat();  // 출력: Charlie는 먹는다.
myDog.bark(); // 출력: Charlie는 짖는다!
myDog.swim(); // 출력: Charlie는 수영한다.

여기서 Labrador은 Dog에서 상속받고, Dog은 Animal에서 상속받습니다. Charlie는 모든 동물의 먹는 능력을 상속받았고, 개의 짖는 능력을 상속받았고, 자신만의 특별한 수영 능력을 가지고 있습니다.

자바스크립트 계층 상속

계층 상속은 여러 클래스가 단일 부모 클래스에서 상속받는 것입니다. 형제들이 동일한 부모로부터 특성을 상속받는 것과 같습니다.

class Vehicle {
constructor(brand) {
this.brand = brand;
}

start() {
console.log(`${this.brand}를 시작합니다.`);
}
}

class Car extends Vehicle {
drive() {
console.log(`${this.brand} 차를 몰고 있습니다.`);
}
}

class Motorcycle extends Vehicle {
wheelie() {
console.log(`${this.brand} 모터사이클에서轮이 돈다!`);
}
}

const myCar = new Car("Toyota");
const myBike = new Motorcycle("Harley");

myCar.start();    // 출력: Toyota를 시작합니다.
myCar.drive();    // 출력: Toyota 차를 몰고 있습니다.

myBike.start();   // 출력: Harley를 시작합니다.
myBike.wheelie(); // 출력: Harley 모터사이클에서轮이 돈다!

Car과 Motorcycle 모두 Vehicle에서 상속받지만, 각각 자신만의 독특한 메서드를 가지고 있습니다.

클래스의 정적 멤버 상속

정적 멤버는 인스턴스가 아니라 클래스 자체에 속하는 멤버입니다. 하지만 그것도 상속할 수 있습니다! 보겠습니다:

class MathOperations {
static PI = 3.14159;

static calculateCircleArea(radius) {
return this.PI * radius * radius;
}
}

class AdvancedMath extends MathOperations {
static calculateSphereVolume(radius) {
return (4/3) * this.PI * radius * radius * radius;
}
}

console.log(AdvancedMath.PI); // 출력: 3.14159
console.log(AdvancedMath.calculateCircleArea(5)); // 출력: 78.53975
console.log(AdvancedMath.calculateSphereVolume(3)); // 출력: 113.09733

여기서 AdvancedMath은 MathOperations의 정적 PI 속성과 calculateCircleArea 메서드를 상속받습니다.

자바스크립트的原型 기반 상속

ES6 클래스 이전에는 자바스크립트가原型 기반 상속을 사용했습니다. 이는 조금 더 복잡하지만, 이해하는 것이 중요합니다:

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
console.log(`${this.name}는 소리를 내는다.`);
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
console.log(`${this.name}는 짖는다: 와우 와우!`);
};

const myDog = new Dog("Rex");
myDog.speak(); // 출력: Rex는 소리를 내는다.
myDog.bark();  // 출력: Rex는 짖는다: 와우 와우!

이는 첫 번째 클래스 기반 예제와 같은 결과를 얻지만, 더 오래된原型 문법을 사용합니다.

상속의 이점

자바스크립트의 상속은 다음과 같은 이점을 제공합니다:

코드 재사용성
확장성
유지보수성
다형성

다음 표는 이러한 이점을 요약합니다:

이점	설명
코드 재사용성	부모 클래스에서 속성과 메서드를 상속하여 중복을 줄임
확장성	기존 클래스에 쉽게 새로운 기능을 추가할 수 있음
유지보수성	부모 클래스의 변경이 자식 클래스에 자동으로 반영됨
다형성	다른 클래스의 객체를 동일한 인터페이스를 통해 사용할 수 있음

기억하시라, 강력한 힘은 큰 책임을 동반합니다. 상속을 지혜롭게 사용하면 코드가 당신을 감사하게 할 것입니다!

그럼 여러분, 자바스크립트 상속의 세계를 탐험한 것입니다. 이 안내서가 당신의 길을 밝혀주길 바랍니다. 계속 연습하고, 호기심을 가지고, 행복하게 코딩하세요!

Credits: Image by storyset