JavaScript 프로토타입(Prototype) 상속 체인 확장 이해하기

JavaScript 프로토타입(Prototype) 상속 체인 확장 이해하기

자바스크립트(JavaScript)는 프로토타입(Prototype) 기반의 객체 지향 언어로, 다른 객체 지향 언어와는 다르게 프로토타입을 통해 상속과 확장을 구현합니다. 이 가이드에서는 자바스크립트의 프로토타입 상속을 이해하고 이를 활용하여 객체를 확장하는 방법을 단계별로 설명합니다.

 

 

목차

1. 프로토타입 상속의 기본 개념
2. 프로토타입 체인
3. 프로토타입 상속 구현하기
4. 프로토타입 확장
5. ES6 클래스와 프로토타입
6. 결론

 

1. 프로토타입 상속의 기본 개념

자바스크립트의 모든 객체는 다른 객체로부터 상속을 받을 수 있는 프로토타입을 가집니다. 이 프로토타입은 객체가 상속할 수 있는 속성과 메서드를 정의합니다. 기본적인 상속 구조는 다음과 같습니다:

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

Person.prototype.greet = function() {
    console.log('Hello, ' + this.name);
};

위 예제에서 Person 객체는 greet 메서드를 프로토타입으로 가지며, 모든 Person 객체 인스턴스는 이 메서드를 상속받아 사용할 수 있습니다.

 

 

2. 프로토타입 체인

프로토타입 체인은 객체가 자신의 프로토타입, 그 프로토타입의 프로토타입, 그 다음 프로토타입을 따라가는 일종의 체인입니다. 이를 통해 자바스크립트는 속성과 메서드를 탐색합니다. 예를 들어:

var person = new Person('John');
person.greet(); // "Hello, John"

person 객체는 greet 메서드를 직접 가지고 있지 않지만, 프로토타입 체인을 따라가 Person.prototype에서 이를 찾고 실행합니다.

 

 

3. 프로토타입 상속 구현하기

자바스크립트에서 프로토타입 상속을 구현하려면 Object.create를 사용하거나 생성자 함수를 활용합니다. 다음은 Object.create를 사용한 예제입니다:

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

Animal.prototype.speak = function() {
    console.log(this.name + ' makes a noise.');
};

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

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

Dog.prototype.speak = function() {
    console.log(this.name + ' barks.');
};

var d = new Dog('Mitzie');
d.speak(); // "Mitzie barks."

이 예제에서는 Dog 객체가 Animal 객체를 상속받아 speak 메서드를 오버라이드합니다.

 

 

4. 프로토타입 확장

프로토타입 확장은 기존 객체에 새로운 메서드나 속성을 추가하는 것입니다. 이는 모든 인스턴스에서 접근 가능하도록 합니다. 예를 들어:

Person.prototype.sayGoodbye = function() {
    console.log('Goodbye, ' + this.name);
};

var person = new Person('Alice');
person.sayGoodbye(); // "Goodbye, Alice"

여기서는 Person 객체의 프로토타입에 sayGoodbye 메서드를 추가하여, 모든 Person 인스턴스가 이를 사용할 수 있도록 했습니다.

 

 

 

 

5. ES6 클래스와 프로토타입

ES6에서는 클래스 문법을 도입하여 프로토타입 상속을 보다 직관적으로 구현할 수 있습니다. 클래스는 내부적으로 프로토타입을 사용하여 동작합니다. 다음은 ES6 클래스를 사용한 예제입니다:

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

    speak() {
        console.log(this.name + ' makes a noise.');
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }

    speak() {
        console.log(this.name + ' barks.');
    }
}

let d = new Dog('Rex');
d.speak(); // "Rex barks."

이 예제에서는 Dog 클래스가 Animal 클래스를 상속받아 speak 메서드를 오버라이드합니다.

 

 

6. 결론

자바스크립트(JavaScript)의 프로토타입(Prototype) 상속은 객체 지향 프로그래밍의 핵심 개념입니다. 프로토타입 체인과 프로토타입 확장을 이해하면, 자바스크립트 객체의 동작 방식을 깊이 있게 이해할 수 있습니다. 또한 ES6 클래스 문법을 통해 더 직관적이고 간결하게 상속을 구현할 수 있습니다. 이 가이드를 통해 프로토타입 상속의 기본부터 고급 활용까지 마스터해보세요.