[JavaScript] 프로토타입

잘못 된 내용에 대한 지적은 언제든 환영입니다.

1. 프로토타입이란?

// 같은 타입의 객체들은 모두 같은 프로토타입을 갖는다.
// 또한, JS의 모든 객체들은 Object.prototype을 프로토타입으로 갖는다.
const obj = new Object(); // Object.prototype
const arr = new Array(); // Array.prototype, Object.prototype
const date = new Date(); // Date.prototype, Object.prototype

• JS의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있으며, 부모로부터 상태나 메소드를 상속받아 사용할 수 있다.
  👉 여기서 부모 역할을 하는 객체를 프로토타입 객체라고 한다.
• 프로토타입 객체가 얽히고 설킨 관계를 프로토타입 체인이라고 하며, 이를 통해 자신에게 없는 상태나 메소드를 부모 객체에서 찾게 된다.

   const arr = "안녕하세요";

   // String.prototype.split
   // String 프로토타입 객체에 있는 split() 메소드를 사용하였다.
   arr.split("");

• 모든 객체의 프로토타입 체인의 최상위는 Object.prototype이다.
• 객체 이니셜라이저를 통해 생성 된 같은 타입의 객체들은 모두 같은 프로토타입을 갖는다.
• Java, C#이 클래스 기반 객체지향 언어이지만, 자바스크립트는 프로토타입 기반 객체지향 언어라고 일컫는다.

2. 프로토타입의 생성

// 객체 생성자 함수
function Animal(name, type) {
  this.name = name;
  this.type = type;
}

// 아래의 인스턴스들은 Animal.prototype을 프로토타입으로 갖는다.
const dog = new Animal("둥이", "개");
const rabbit = new Animal("깡총이", "토끼");

• 가장 기본적인 프로토타입 생성법은 위와 같이 객체 생성자 함수를 작성하는 것이다.
  👉 객체 생성자 함수란? new 연산자를 통해 호출하여 인스턴스를 생성하는 함수를 말한다.

3. 클래스와 프로토타입의 차이

• 클래스는 부모 객체 자체를 상속시켜 인스턴스를 생성한다.
• 프로토타입은 객체들을 프로토타입으로 연결시켜 인스턴스를 생성한다.
  👉 인스턴스는 Prototype 속성을 통해 프로토타입 객체와 연결되어 있으며, 프로토타입 객체에는 constructor() 메서드를 통해 인스턴스들과 연결되어 있다.
• 클래스와 달리, 프로토타입은 동적인 상태 및 메소드 추가가 가능하다.

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

   Animal.prototype.age = 1;
   Animal.prototype.sound = () => {
     console.log("울음소리 데츄");
   };

• ES6부터 지원하는 클래스 문법은 프로토타입 방식을 클래스 문법처럼 사용할 수 있도록 하는 Syntactic Sugar이다.