모던 자바스크립트 Deep Dive - 19장 프로토타입

프로토타입이 무엇인지 알기 위해서는 자바스크립트에서 중요한 개념인 객체 지향 프로그래밍에 대해서 알아야한다.

객체지향 프로그래밍(Object Oriented Programming)

• 프로그램을 단순히 데이터와 처리 방법으로 나누는 것이 아니라, 프로그램을 수많은 "객체"라는 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다.
• 이전의 프로그래밍은 컴퓨터가 사고하는 방향, 즉 컴퓨터 중심의 프로그래밍이었다. 하지만 객체 지향 프로그래밍의 개념이 생기고 난 후 인간 중심적 프로그래밍을 할 수 있게 되었다.

객체지향 프로그래밍의 4가지 특징

1. 캡슐화

   • 변수와 함수를 하나의 단위로 묶는 것을 의미한다. 즉, 데이터의 번들링이다.

2. 상속

   • 상속은 자식 클래스가 부모 클래스의 특성과 기능을 그대로 물려받는 것을 말한다. 상속은 캡슐화를 유지하면서도 클래스의 재사용이 용이하도록 해 준다.

3. 다형성

   • 하나의 변수, 또는 함수가 상황에 따라 다른 의미로 해석될 수 있는 것을 말한다.

4. 추상화

   • 프로그래밍에서 핵심적이거나 공통되는 속성 및 기능을 간추리는 것

프로토타입

• 프로토타입을 많은 사람들이 "유전자"로 비유한다.
• 자바스크립트의 프로토타입은 객체가 다른 객체의 속성과 메서드를 상속받는 메커니즘이다.
• 또한 객체의 프로토타입 체인을 통해, 부모 객체의 속성 및 메서드가 자식 객체로 전파된다.
• 즉, 프로토타입 체인의 상위 객체를 수정하거나 메서드를 변경하면, 그 체인 아래에 있는 객체들도 변경 사항을 반영하게 된다.

// 생성자 함수 정의
function Person(name) {
  this.name = name;
}
// Person의 프로토타입에 메서드 추가
Person.prototype.sayHello = function() {
  return `Hello, my name is ${this.name}`;
};
// Person 객체 생성
const alice = new Person('Haegu');
// sayHello 메서드는 Person.prototype에 정의되어 있기 때문에, Hageu 객체에서 호출할 수 있다.
console.log(alice.sayHello()); // "Hello, my name is Haegu"

이 예제에서는 Person이라는 생성자 함수를 정의하고, Person.prototype에 sayHello 메서드를 추가했다. 이를 통해 Person의 모든 인스턴스는 sayHello 메서드를 사용할 수 있다.

프로토타입 객체

• 프로토타입 객체는 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.
• 프로토타입은 proto 접근자 프로퍼티를 통해 사용할 수 있다.

// 기본 객체 정의
const animal = {
  speak() {
    return 'Animal noise';
  }
};

// 새로운 객체를 animal의 프로토타입으로 설정
const dog = {
  bark() {
    return 'Woof!';
  }
};

// dog 객체의 프로토타입을 animal로 설정
dog.__proto__ = animal;

console.log(dog.speak()); // "Animal noise" (animal의 메서드)
console.log(dog.bark());  // "Woof!" (dog의 메서드)

이 예제에서 dog 객체의 proto 속성을 animal 객체로 설정하여, dog가 animal의 속성 및 메서드를 상속받는다. 이로 인해 dog 객체는 animal의 speak 메서드도 사용할 수 있다.

프로토타입 체인

• 자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다.
• 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.