Javascript : 대체 프로토타입은 무엇인가

출처: 모던 자바스크립트 딥다이브

자바스크립트에서 프로토타입(prototype)은 객체 간의 상속을 가능하게 해주는 중요한 메커니즘이다. 프로토타입은 모든 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 한다. 이를 통해 코드 재사용성과 확장성을 높일 수 있다.

프로토타입이란?

• 프로토타입은 객체가 상속받는 부모 객체를 의미한다.
• 모든 자바스크립트 객체는 __proto__라는 내부 프로퍼티를 가지고 있으며, 이는 해당 객체의 프로토타입을 참조한다.
• 생성자 함수의 prototype 속성은 생성된 객체들의 프로토타입을 정의한다.

예제 1: 기본적인 프로토타입 사용

function Person(name, age) {
this.name = name;
this.age = age;
}
// Person 생성자의 프로토타입에 메서드 추가
Person.prototype.sayHello = function () {
console.log(Hi! My name is ${this.name}.);
};
// 새로운 인스턴스 생성
const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);
// sayHello 메서드 호출
person1.sayHello(); // Hi! My name is Alice.
person2.sayHello(); // Hi! My name is Bob.

설명:

1. Person 생성자 함수는 name과 age를 속성으로 가지는 객체를 생성한다.
2. Person.prototype에 추가된 sayHello 메서드는 모든 Person 인스턴스에서 공유된다.
3. person1과 person2는 각각 독립적인 객체지만, 동일한 sayHello 메서드를 공유한다.

---

프로토타입 체인

자바스크립트는 프로토타입 체인을 통해 속성과 메서드를 검색한다.

• 객체에서 특정 속성을 찾을 때, 해당 객체에 속성이 없으면 그 객체의 프로토타입에서 속성을 검색한다.
• 이 과정은 최상위 프로토타입인 Object.prototype에 도달하거나, 찾고자 하는 속성이 발견될 때까지 계속된다.

예제 2: 프로토타입 체인

const obj1 = { a: 1 };
const obj2 = Object.create(obj1); // obj1을 obj2의 프로토타입으로 설정
obj2.b = 2;
console.log(obj2.a); // 1 (obj1에서 상속받음)
console.log(obj2.b); // 2 (obj2 자신의 속성)
console.log(obj2.c); // undefined (프로토타입 체인 어디에도 없음)

설명:

1. Object.create(obj1)은 obj1을 obj2의 프로토타입으로 설정한다.
2. obj2.a를 호출하면, obj2에는 없지만 프로토타입 체인을 따라 obj1.a를 찾는다.

---

Object.create()로 프로토타입 설정

Object.create()는 특정 객체를 새로운 객체의 프로토타입으로 설정할 때 사용된다.

예제 3: Object.create()

const animal = {
speak() {
console.log(${this.name} makes a noise.);
},
};
const dog = Object.create(animal);
dog.name = 'Dog';
dog.speak(); // Dog makes a noise.

설명:

1. animal 객체를 생성하고, 여기에 speak() 메서드를 정의한다.
2. Object.create(animal)을 통해 새로운 객체 dog를 생성하고, 이를 animal의 자식으로 설정한다.
3. 이제 dog.speak()를 호출하면, 부모인 animal로부터 상속받은 메서드가 실행된다.

---

생성자 함수와 프로토타입

생성자 함수는 새로운 객체를 만들고, 해당 객체의 프로토타입을 설정하는 데 사용된다.

예제 4: 생성자 함수와 프로토타입

function Car(brand) {
this.brand = brand;
}
Car.prototype.drive = function () {
console.log(Driving a ${this.brand}.);
};
const car1 = new Car('Toyota');
const car2 = new Car('Honda');
car1.drive(); // Driving a Toyota.
car2.drive(); // Driving a Honda.

설명:

1. Car 생성자 함수는 새로운 자동차 객체를 만든다.
2. Car.prototype.drive() 메서드는 모든 자동차 인스턴스에서 공유된다.

---

요약

• 프로토타입은 자바스크립트에서 상속을 구현하는 핵심 메커니즘이다.
• 모든 객체는 다른 객체로부터 속성과 메서드를 상속받을 수 있다.
• 프로토타입 체인은 특정 속성을 찾기 위해 부모 객체를 따라 올라가는 과정이다.
• 생성자 함수와 Object.create()를 사용하여 프로토타입을 설정할 수 있다.

---

추가 연습 문제

function Animal(name) {
this.name = name;
}
Animal.prototype.eat = function () {
console.log(${this.name} is eating.);
};
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} says Woof!);
};
const dog1 = new Dog('Buddy', 'Golden Retriever');
dog1.eat(); // Buddy is eating.
dog1.bark(); // Buddy says Woof!