최근에 공부하게된 자바스크립트의 프로토타입에 관련해서 정리해보고자 합니다. 프로토타입은 객체 지향 프로그래밍을 지원해주는 대표적인 특징으로, 속성과 메서드를 상속하는 방식을 정의합니다.

1. 프로토타입이란?

자바스크립트에서 모든 객체는 내부적으로 [Prototype]이라는 프로퍼티를 가지고 있습니다. 이 프로퍼티는 객체가 상속받을 수 있는 템플릿 역할을 하며, 객체가 특정 속성이나 메서드를 찾을 때, 해당 객체에서 찾지 못하면 프로토타입을 통해 상속받은 속성이나 메서드를 찾습니다.

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

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

const dog = new Animal('Dog');
dog.speak(); // 출력: Dog makes a noise.

위의 예시에서 Animal이라는 생성자 함수가 있습니다. 그리고 Animal의 프로토타입에 speak 메서드를 추가했습니다.
dog 객체는 Animal의 인스턴스이며, dog 객체가 Animal의 프로토타입을 통해 speak 메서드를 상속받았기 때문에 speak 메서드를 호출할 수 있습니다.

2. 프로토타입 체인

자바스크립트의 프로토타입 체인은 객체가 속성이나 메서드를 찾을 때, 해당 객체의 프로토타입을 차례대로 확인하는 방식입니다. 객체는 여러 레벨의 프로토타입을 통해 속성과 메서드를 상속받을 수 있습니다.

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

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

function Dog(name) {
    Animal.call(this, name); // Animal 생성자 호출
}

// Dog의 프로토타입을 Animal의 인스턴스로 설정
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

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

const dog = new Dog('Rex');
dog.speak(); // 출력: Rex barks.

위의 예시에서 Dog 생성자 함수는 Animal을 상속받습니다. Dog.prototype을 Animal.prototype의 인스턴스로 설정함으로써, Dog 객체는 Animal의 메서드에 접근할 수 있습니다. Dog의 speak 메서드는 Animal의 speak 메서드를 오버라이드하여, Rex barks 출력하게됩니다.

3. 결론

프로토타입은 자바스크립트의 상속 구조를 이해하는 데 필수적인 개념이었습니다. 특히나 코드의 재사용성을 높이고, 객체 간의 관계를 명확히 하는데 큰 역할을 담당하고 있었습니다. 또한 모든 인스턴스가 메서드를 공유하기 때문에, 각 인스턴스마다 메서드를 복사할 필요가 없다는 점을 새로 알게되었습니다..