39. 자바스크립트 상속 구현 (Implementing Inheritance)

상속 구현 (Implementing Inheritance)

자바스크립트(JavaScript)에서 상속 구현(Implementing Inheritance)은 객체(Object)가 다른 객체의 속성과 메서드를 물려받는 과정을 말한다. 프로토타입 체인(Prototype Chain)을 통해 상속 관계를 형성한다. 상속 구현(Implementing Inheritance)의 정의, 동작 방식, 일반 객체와의 차이점, 그리고 사용 사례를 예제로 확인해보자.

상속 구현(Implementing Inheritance)은 ES6 클래스(Class)와 프로토타입(Prototype)을 활용하며, 코드 재사용성과 계층 구조를 제공한다. 자바스크립트(JavaScript)의 객체 지향 프로그래밍(Object-Oriented Programming)을 가능하게 한다.

상속 구현(Implementing Inheritance)이란 무엇인가?

상속 구현(Implementing Inheritance)은 부모 객체의 기능을 자식 객체가 물려받아 사용하는 메 커니즘이다. 기본적인 예제를 살펴보자:

function Animal(name) {
 this.name = name;
}
Animal.prototype.speak = function() {
 return `${this.name}가 소리를 낸다`;
};
function Dog(name) {
 Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
const dog = new Dog("멍멍이");
console.log(dog.speak()); // 멍멍이가 소리를 낸다

Animal.call로 속성을 상속받고, Object.create로 프로토타입(Prototype)을 연결한다.

상속 구현(Implementing Inheritance)의 동작 방식

상속 구현(Implementing Inheritance)은 프로토타입 체인(Prototype Chain)을 통해 부모 객체의 속성과 메서드를 참조한다. ES6에서는 class와 extends로 간소화된다.

예제를 통해 동작 방식을 확인한다:

class Vehicle {
 constructor(speed) { this.speed = speed; }
 move() { return `속도: ${this.speed}`; }
}
class Car extends Vehicle {
 constructor(speed) { super(speed); }
}
const car = new Car(100);
console.log(car.move()); // 속도: 100

super는 부모 생성자를 호출하며, 메서드는 프로토타입 체인(Prototype Chain)에서 상속된다.

상속 구현(Implementing Inheritance)과 일반 객체의 차이점

1. 속성 공유

- 일반 객체: 독립적인 속성만 가짐.

const obj = { name: "객체" };
console.log(obj.speak); // undefined

- 상속: 부모 속성을 물려받음.

function Parent() {}
Parent.prototype.say = function() { return "말한다"; };
const child = Object.create(Parent.prototype);
console.log(child.say()); // 말한다

2. 구조

- 일반 객체: 단일 구조.

- 상속: 계층 구조 형성.

사용 사례

상속 구현(Implementing Inheritance)의 활용 사례를 예제로 확인한다.

1. 기본 상속

function Shape() { this.type = "도형"; }
Shape.prototype.draw = function() { return "그린다"; };
function Circle() { Shape.call(this); }
Circle.prototype = Object.create(Shape.prototype);
const circle = new Circle();
console.log(circle.draw()); // 그린다

2. 클래스 상속

class Animal {
 constructor(name) { this.name = name; }
 eat() { return "먹는다"; }
}
class Bird extends Animal {
 fly() { return "난다"; }
}
const bird = new Bird("참새");
console.log(bird.eat()); // 먹는다

3. 메서드 오버라이드

class Base {
 speak() { return "기본"; }
}
class Derived extends Base {
 speak() { return "파생"; }
}
const d = new Derived();
console.log(d.speak()); // 파생

4. 다중 계층

class A { a() { return "A"; } }
class B extends A { b() { return "B"; } }
class C extends B { c() { return "C"; } }
const c = new C();
console.log(c.a()); // A

5. 프로토타입 확장

function Machine() {}
Machine.prototype.power = "켜짐";
function Robot() { Machine.call(this); }
Robot.prototype = Object.create(Machine.prototype);
Robot.prototype.task = function() { return "작업"; };
const robot = new Robot();
console.log(robot.power); // 켜짐

6. 믹스인

const mixin = {
 log() { return "로그"; }
};
function Device() {}
Object.assign(Device.prototype, mixin);
const dev = new Device();
console.log(dev.log()); // 로그

7. 생성자 연결

function Parent(name) { this.name = name; }
function Child(name, age) {
 Parent.call(this, name);
 this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
const child = new Child("철수", 10);
console.log(child.name); // 철수

8. 클래스 속성 추가

class User {
 constructor(id) { this.id = id; }
}
class Admin extends User {
 constructor(id) { super(id); this.role = "관리자"; }
}
const admin = new Admin(1);
console.log(admin.role); // 관리자

성능과 한계

장점

- 재사용성: 공통 코드를 공유한다.

- 계층화: 복잡한 구조를 표현한다.

한계

- 복잡성: 깊은 상속은 관리가 어렵다.

- 성능: 체인 탐색에 시간이 걸릴 수 있다.

상속 깊이를 제한하여 복잡성을 줄인다.

마무리

상속 구현(Implementing Inheritance)은 자바스크립트(JavaScript)에서 객체 간 관계를 형성하는 유용한 방법이다. 사용 사례를 통해 그 활용 방식을 살펴봤다.