[JS]프로토타입과 프로토타입 체인

프로토타입

JavaScript의 모든 객체는 프로토타입이라는 객체를 참조합니다.
프로토타입은 객체가 공유할 속성이나 메서드를 정의하는 데 사용되며, 새 객체가 생성될 때 해당 객체는 자신의 프로토타입을 상속받습니다.

예시

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const Hong = new Person('Hong');
Hong.sayHello(); // 출력: Hello, my name is Hong

• 여기서 Person.prototype에 정의된 sayHello 메서드는 Hong 객체가 상속받아 사용합니다.
• 이는 메모리 절약에도 유리합니다. 메서드를 공유하므로 각 객체마다 동일한 메서드를 복사하지 않아도 됩니다.

프로토타입 체인

프로토타입 체인은 객체가 속성이나 메서드를 찾는 과정을 설명합니다.
객체에서 특정 속성이나 메서드를 찾으려고 할 때, 자바스크립트는 다음 단계를 따릅니다

1. 해당 객체에 속성이 있는지 확인합니다.
2. 없다면 그 객체의 프로토타입을 확인합니다.
3. 계속해서 상위 프로토타입으로 검색을 이어갑니다.
4. 최상위 Object.prototype까지 확인하며, 거기서도 찾지 못하면 undefined를 반환합니다.

console.log(Hong.toString()); 
// `Hong` 객체에는 `toString` 메서드가 없음 → `Person.prototype` 확인
// `Person.prototype`에도 없음 → `Object.prototype`에서 찾음 → 실행

프로토타입과 상속

JavaScript에서는 프로토타입 기반 상속을 통해 객체 간에 속성과 메서드를 공유할 수 있습니다.
ES6의 class 문법도 결국 내부적으로는 프로토타입을 활용한 상속을 활용합니다.

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

Animal.prototype.move = function() {
  console.log(`${this.name} is moving`);
};

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

Dog.prototype = Object.create(Animal.prototype); // 프로토타입 상속
Dog.prototype.constructor = Dog;

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

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.move(); // Buddy is moving (Animal의 메서드)
myDog.bark(); // Buddy says: Woof! (Dog의 메서드)

코드 설명

1. Animal 생성자 함수

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

• Animal은 생성자 함수로, new 키워드로 호출하면 새로운 객체를 생성합니다.
• name이라는 속성을 초기화하며, 생성된 객체마다 고유의 값을 가질 수 있습니다.

2. Animal의 프로토타입 메서드

Animal.prototype.move = function() {
  console.log(`${this.name} is moving`);
};

• Animal.prototype에 정의된 move 메서드는 모든 Animal 객체가 상속받아 사용할 수 있습니다.
• 프로토타입에 메서드를 정의하면 메모리를 절약할 수 있습니다. 모든 인스턴스가 이 메서드를 공유합니다.

3. Dog 생성자 함수

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

• Dog는 또 다른 생성자 함수입니다.
• Animal.call(this, name)를 사용해 Animal의 생성자를 호출하고, Dog 생성자에서 초기화 작업을 수행합니다.
  • 여기서 this는 Dog 인스턴스를 가리키며, 이를 통해 name 속성을 Animal 생성자에서 초기화합니다.
• breed라는 속성을 추가로 정의해 Dog에 고유한 속성을 설정합니다.

4. Dog의 프로토타입 상속

Dog.prototype = Object.create(Animal.prototype); // 프로토타입 상속
Dog.prototype.constructor = Dog;

• Object.create(Animal.prototype)
  • Animal.prototype을 프로토타입으로 가지는 새로운 객체를 생성합니다.
  • 이를 통해 Dog는 Animal의 프로토타입 체인을 상속받아 move 메서드를 사용할 수 있습니다.
• Dog.prototype.constructor = Dog
  • 프로토타입을 새로 설정하면 constructor가 기본적으로 Animal을 가리킵니다.
  • 이를 다시 Dog로 명시적으로 설정하여 정확한 생성자 정보를 유지합니다.

5. Dog의 프로토타입 메서드

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

• Dog.prototype에 bark 메서드를 추가합니다.
• 이 메서드는 Dog의 인스턴스에서만 사용 가능한 고유 메서드입니다.

6. 객체 생성 및 메서드 호출

const myDog = new Dog('Buddy', 'Golden Retriever');

• new Dog('Buddy', 'Golden Retriever')
  • 새로운 Dog 객체를 생성합니다.
  • Animal 생성자를 호출하여 name 속성을 Buddy로 초기화하고, breed 속성을 Golden Retriever로 설정합니다.

myDog.move(); // Buddy is moving (Animal의 메서드)
myDog.bark(); // Buddy says: Woof! (Dog의 메서드)

• myDog.move()
  • move 메서드는 Animal.prototype에서 상속받은 메서드입니다.
  • this.name은 myDog 객체의 name 속성(Buddy)를 참조합니다.
• myDog.bark()
  • bark 메서드는 Dog.prototype에서 정의된 메서드입니다.
  • this.name은 역시 myDog 객체의 name 속성을 참조합니다.

JavaScript의 프로토타입은 객체 지향 프로그래밍을 이해하는 데 핵심적인 개념이며, 효율적인 코드 작성과 메모리 관리의 기반이 된다.

프로토타입 기반 상속은 클래스 문법으로도 사용되지만, 내부적으로는 동일한 동작 방식을 따르니 이 개념을 정확히 이해하는 것이 중요하다.