#17 자바스크립트 프로토타입 상속

자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반 언어입니다. 이는 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있다는 의미입니다. 프로토타입 상속은 자바스크립트에서 객체 간에 속성을 공유하고, 코드 재사용성을 높이는 핵심 개념입니다.

프로토타입 상속이란?

자바스크립트에서 모든 객체는 프로토타입을 가질 수 있으며, 프로토타입은 또 다른 객체입니다. 특정 객체가 다른 객체의 속성과 메서드를 사용할 수 있는 것은 바로 이 프로토타입을 통해서 이루어집니다. 상속받은 객체는 부모 객체의 메서드와 속성을 그대로 사용할 수 있습니다.

프로토타입 상속의 기본 예제

const animal = {
    speak() {
        console.log('Animal sound');
    }
};

const dog = Object.create(animal);
dog.bark = function() {
    console.log('Woof! Woof!');
};

dog.speak(); // "Animal sound"
dog.bark();  // "Woof! Woof!"

위의 예제에서 dog 객체는 animal 객체를 프로토타입으로 상속받았습니다. 이로 인해 dog 객체는 animal 객체의 speak 메서드를 호출할 수 있습니다.

생성자 함수와 프로토타입 상속

생성자 함수(Constructor Function)는 자바스크립트에서 객체를 생성하는 일반적인 방법 중 하나입니다. 생성자 함수를 통해 생성된 객체는 생성자 함수의 prototype 속성에 정의된 메서드와 속성을 상속받습니다.

생성자 함수 예제

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

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

const dog = new Animal('Dog');
dog.speak(); // "Dog makes a sound."

위의 예제에서 Animal 생성자 함수는 name 속성을 가진 객체를 생성합니다. 이 객체는 Animal.prototype에 정의된 speak 메서드를 상속받아 사용할 수 있습니다.

프로토타입 체인을 통한 상속

프로토타입 체인은 객체가 상속을 통해 다른 객체의 프로퍼티를 사용할 수 있는 구조를 의미합니다. 자바스크립트에서는 객체의 프로퍼티나 메서드에 접근할 때, 먼저 해당 객체에 직접 정의된 것이 있는지 확인하고, 없으면 프로토타입 체인을 따라 상위 객체에서 찾습니다.

프로토타입 체인 상속 예제

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

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

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

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

Dog.prototype.bark = function() {
    console.log(`${this.name} barks!`);
};

const rex = new Dog('Rex', 'Labrador');
rex.speak(); // "Rex makes a sound."
rex.bark();  // "Rex barks!"

위의 예제에서 Dog 생성자 함수는 Animal 생성자 함수로부터 상속을 받습니다. Dog.prototype은 Animal.prototype을 상속받으며, Dog 객체는 speak와 bark 메서드를 모두 사용할 수 있습니다.

클래스 기반 상속 (ES6)

ES6(ECMAScript 2015)에서는 class 문법을 도입하여 프로토타입 상속을 더 쉽게 작성할 수 있도록 했습니다. class는 기존의 프로토타입 기반 상속을 문법적으로 더 간결하게 표현한 것입니다.

클래스 상속 예제

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

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

const rex = new Dog('Rex', 'Labrador');
rex.speak(); // "Rex makes a sound."
rex.bark();  // "Rex barks!"

위의 예제에서는 class 문법을 사용하여 Animal 클래스를 만들고, 이를 상속받아 Dog 클래스를 정의했습니다. super 키워드를 사용해 부모 클래스의 생성자를 호출하며, Dog 클래스는 Animal 클래스의 모든 메서드를 상속받습니다.

프로토타입 상속의 장점

• 코드 재사용: 프로토타입 상속을 통해 동일한 메서드를 여러 객체에서 재사용할 수 있어, 중복 코드를 줄일 수 있습니다.
• 메모리 효율성: 상속받은 객체는 공통된 메서드를 공유하므로, 메모리 사용을 줄일 수 있습니다.
• 유연성: 객체에 새로운 속성이나 메서드를 쉽게 추가할 수 있으며, 기존 객체를 확장할 수 있습니다.

프로토타입 상속의 단점

• 복잡성: 깊은 프로토타입 체인에서는 디버깅이 어렵고, 코드가 복잡해질 수 있습니다.
• 성능: 상속 계층이 깊어질수록 프로토타입 체인을 따라가는 과정이 길어져 성능에 영향을 미칠 수 있습니다.

결론

자바스크립트의 프로토타입 상속은 객체 간의 관계를 효율적으로 관리하고, 코드 재사용성을 높이는 강력한 도구입니다. 이를 잘 이해하고 활용하면, 더 구조적이고 유지보수하기 쉬운 자바스크립트 코드를 작성할 수 있습니다. 특히 ES6의 클래스 문법을 사용하면 프로토타입 상속을 더 직관적으로 작성할 수 있으므로, 현대 자바스크립트 개발에서 매우 유용합니다.