[ JavaScript ] Prototype

📚 프로토타입 ( prototype ) 이란?

자바스크립트에서 모든 객체는 프로토타입을 가지며,
프로토타입은 객체의 메서드와 속성을 정의하는 객체입니다.
객체가 생성될 때, 생성자 함수의 prototype 속성에 정의된
메서드와 속성은 생성된 객체의 프로토타입으로 설정됩니다.
이를 통해 생성된 모든 인스턴스는 이 프로토타입을 통해 메서드와 속성을 상속받습니다.

🙋🏻‍♀️ 상속이란?

자바스크립트는 프로토타입을 기반으로 상속을 구현하는데
여기서 상속이란, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속 받아 
그대로 사용할 수 있는 것을 말하며 이를 통해 코드의 재사용성을 높이고,
유지보수가 용이해지며 불필요한 중복을 제거합니다.

🛠️ 프로토타입을 통한 메서드 공유

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

Test.prototype.introduce = function() {
  return `안녕하세요. ${this.name}입니다!`;
};

const test1 = new Test("JavaScript");
const test2 = new Test("React");

console.log(test1.introduce === test2.introduce); // true

Test 생성자 함수의 prototype 프로퍼티로
프로토타입에 접근하여 공유 메서드 introduce 를 생성했습니다.
그리고 Test 생성자 함수가 생성한 모든 인스턴스는 부모 객체 역할을 하는
프로토타입 Test.prototype 으로부터 introduce 메서드를 상속받습니다.

🔍 프로퍼티의 소유와 공유

name 과 같이 개별적으로 소유(인스턴스마다 고유한 값을 가지는 프로퍼티)하는 프로퍼티만
개별적으로 소유하고, 내용이 동일한 메서드는 프로토타입 상속을 통해 공유하여 사용합니다.

이처럼, 프로토타입은 객체 간 상속을 구현하기 위해 사용되며
부모의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티, 메서드를 제공합니다.

🔗 프로토타입 체인

모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여있습니다.

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

Test.prototype.introduce = function() {
  return `안녕하세요. ${this.name}입니다!`;
};

const test1 = new Test("JavaScript");
console.log(test1.hasOwnProperty("name")); // true
console.log(test1.hasOwnProperty("introduce")); // false
// 'introduce'는 test1 객체의 직접적인 프로퍼티가 아니라 Test.prototype에서 상속된 메서드입니다.

자바스크립트 엔진은 객체의 프로퍼티에 접근하려고 할 때, 해당 객체에 접근하려는
프로퍼티가 없다면 접근자 프로퍼티가 가리키는 참조를 따라 부모 역할을 하는 프로토타입의
프로퍼티를 순차적으로 검색하는데 이를 프로토타입 체인이라고 합니다.

프로토타입 체인은 자바스크립트의 상속 메커니즘의 핵심이기도 합니다.
객체가 프로퍼티를 찾을 때, 먼저 자신의 프로퍼티를 확인하고,
없으면 프로토타입 체인을 따라 상위 프로토타입을 검색합니다.
이 과정은 객체가 생성될 때 설정된 프로토타입 링크에 따라 이루어집니다.
따라서, 프로토타입 체인을 이해하는 것은 자바스크립트의 객체 지향 프로그래밍을 이해하는 데 매우 중요합니다.