[JS] 프로토타입의 역할

🗣️ 자바스크립트의 프로토타입의 역할을 설명해주세요.

• 의도: ES6 이전에 많이 쓰이던 프로토타입에 대해서도 인지하고 있는지 확인하는 질문

• 나의 답안

  프로토타입은 객체가 상속받는 부모 객체로, 객체가 가진 기본 속성과 메서드를 정의하는 객체입니다.
  모든 객체는 숨겨진 연결인 [[Prototype]](또는 __proto__)를 가지고 있으며, 이 연결을 통해 다른 객체의 속성과 메서드를 상속받을 수 있습니다.
  프로토타입을 통해 객체가 자신의 속성뿐 아니라 상속받은 속성에도 접근할 수 있습니다.

  객체의 속성에 접근할 때, 자바스크립트는 우선 현재 객체에서 속성을 찾습니다.
  만약 속성이 없다면 프로토타입 객체를 따라 올라가며 속성을 찾습니다.
  이것이 바로 프로토타입 체인입니다.
  프로토타입 체인의 끝에 도달할 때까지 반복하여 속성을 찾습니다.

  현재는 클래스를 통해 프로토타입 기반 상속을 더 간결하고 직관적으로 사용할 수 있습니다.

• 주어진 답안 (모범 답안)

  자바스크립트의 프로토타입은 객체가 가진 기본 속성과 메서드를 정의하는 객체입니다.
  프로토타입에 정의된 이러한 속성과 메서드가 각 타입을 타입답게 만들게 됩니다.
  예를 들어 숫자에 toString() 메서드가 있는 것처럼 말입니다.

  옛날에 클래스가 나오기 전에는 이 프로토타입을 통해 직접 메서드를 만들어주었습니다.

---

📝 개념 정리

자바스크립트의 프로토타입(prototype)은 객체지향 프로그래밍에서 객체 간 상속을 구현하는 메커니즘이다.
자바스크립트는 클래스 기반 언어가 아닌 프로토타입 기반 언어로 설계되었으며, 모든 객체는 다른 객체로부터 속성과 메서드를 상속받을 수 있다.
이를 이해하려면 자바스크립트의 객체와 함수가 어떻게 동작하는지, 그리고 프로토타입 체인이 어떻게 작동하는지를 알야아 한다.

🌟 프로토타입이란?

프로토타입은 객체가 상속받는 부모 객체이다.
모든 객체는 숨겨진 연결인 [[Prototype]](또는 __proto__)를 가지고 있으며, 이 연결을 통해 다른 객체의 속성과 메서드를 상속받을 수 있다.

const obj = { name: "Alice" };
console.log(obj.__proto__); // Object.prototype

• 위 코드에서 obj의 프로토타입은 Object.prototype이다.
• 프로토타입을 통해 객체가 자신의 속성뿐 아니라 상속받은 속성에도 접근할 수 있다.

---

🌟 프로토타입 체인(Prototype Chain)

객체의 속성에 접근할 때 자바스크립트는 다음 순서로 검색을 진행한다.

1. 현재 객체에서 속성을 찾는다.
2. 속성이 없으면 프로토타입 객체를 따라 올라가며 속성을 찾는다.
3. 프로토타입 체인의 끝에 도달할 때까지 반복한다.

const animal = {
  eats: true,
};

const rabbit = {
  jumps: true,
  __proto__: animal, // animal을 프로토타입으로 설정
};

console.log(rabbit.eats); // true (animal에서 상속받음)
console.log(rabbit.jumps); // true (rabbit 자체 속성)

---

🌟 객체 생성과 프로토타입

1. 객체 리터럴
   객체 리터럴로 생성된 객체의 기본 프로토타입은 Object.prototype이다.

   const obj = {};
   console.log(obj.__proto__ === Object.prototype); // true

2. 생성자 함수와 프로토타입
   생성자 함수로 객체를 생성하면, 생성된 객체는 생성자 함수의 prototype 속성을 프로토타입으로 사용한다.

   function Person(name) {
     this.name = name;
   }
   
   Person.prototype.sayHello = function () {
     console.log(`Hello, my name is ${this.name}`);
   };
   
   const alice = new Person("Alice");
   alice.sayHello(); // Hello, my name is Alice
   
   console.log(alice.__proto__ === Person.prototype); // true

---

🌟 프로토타입 상속

객체는 프로토타입 체인을 통해 다른 객체의 속성을 상속받을 수 있다.
이를 이용해 재사용 가능한 코드를 작성할 수 있다.

const animal = {
  eats: true,
};

const rabbit = Object.create(animal); // animal을 프로토타입으로 가진 객체 생성
rabbit.jumps = true;

console.log(rabbit.eats); // true (animal에서 상속)
console.log(rabbit.jumps); // true (rabbit 자체 속성)

---

🌟 Object.create()와 Object.setPrototypeOf()

1. Object.create(proto)
Object.create()는 주어진 객체를 프로토타입으로 설정한 새 객체를 생성한다.

   const animal = {
     eats: true,
   };
   
   const rabbit = Object.create(animal);
   console.log(rabbit.eats); // true

2. Object.setPrototypeOf(obj, proto)
Object.setPrototypeOf()는 기존 객체의 프로토타입을 설정한다.

   const animal = {
     eats: true,
   };
   
   const rabbit = {};
   Object.setPrototypeOf(rabbit, animal);
   
   console.log(rabbit.eats); // true

---

🌟 클래스와 프로토타입

자바스크립트의 클래스는 프로토타입 기반 상속을 더 간결하고 직관적으로 사용할 수 있도록 한 문법적 설탕이다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(`${this.name} is eating`);
  }
}

class Rabbit extends Animal {
  jump() {
    console.log(`${this.name} is jumping`);
  }
}

const bunny = new Rabbit("Bunny");
bunny.eat(); // Bunny is eating
bunny.jump(); // Bunny is jumping

• Rabbit 클래스는 Animal 클래스를 상속받으며, 내부적으로 프로토타입 체인이 설정된다.

---

🌟 프로토타입의 메서드와 속성

1. Object.prototype
Object.prototype은 모든 객체의 기본 프로토타입이며, 아래와 같은 유용한 메서드를 제공한다.

   • toString()
   • hasOwnProperty()
   • isPrototypeOf()

2. 사용자 정의 메서드 추가
   기본 프로토타입에 메서드를 추가하면 모든 객체가 이를 상속받는다.

   Object.prototype.greet = function () {
     console.log("Hello from prototype!");
   };
   
   const obj = {};
   obj.greet(); // Hello from prototype!

   ❗주의: 실제 프로젝트에서 기본 프로토타입을 수정하는 것은 권장되지 않는다.

---

🌟 __proto__와 Object.getPrototypeOf()

1. __proto__
__proto__는 객체의 프로토타입에 접근하거나 설정할 수 있는 비표준 속성이다.
   최신 코드에서는 Object.getPrototypeOf()와 Object.setPrototypeOf()를 대신 사용하는 것이 권장된다.

2. Object.getPrototypeOf()
Object.getPrototypeOf()는 객체의 프로토타입(즉, [[Prototype]] 또는 __proto__)에 접근하기 위해 사용하는 표준 메서드이다.
   객체가 다른 객체로부터 상속받는 구조를 이해하거나 확인하고 싶을 때 유용하다.

   const obj = {};
   console.log(Object.getPrototypeOf(obj) === Object.prototype); // true

---

🌟 프로토타입의 한계

1. 프로토타입 체인이 깊어지면 성능 저하
   프로토타입 체인이 깊을수록 속성 검색 시간이 길어질 수 있다.

2. 프로토타입 오염 문제
   기본 프로토타입(Object.prototype)을 변경하면 모든 객체에 영향을 줄 수 있다.