이미지출처 : 하나몬님 ( 감사합니다! )

프로토타입

자바스크립트 객체 지향 프로그래밍에서 객체간 상속과 프로퍼티 공유를 구현하는 데 사용되는 메커니즘

자바스크립트는 흔히 [프로토타입 기반 언어] 라고 불린다.
Why? 객체 간의 상속 및 프로퍼티 공유를 프로토타입 체인을 통해 구현하기 때문!
일반적인 클래스 기반 언어에서는 클래스를 정의하고 해당 클래스의 인스턴스를 생성하여 사용합니다. 하지만 자바스크립트에서는 클래스 개념이 존재하지 않습니다.
-> 대신에, 객체 리터럴이나 생성자 함수를 사용하여 객체를 생성하고, 생성된 객체는 프로토타입 객체와 연결된다는 사실!

.prototype

함수 객체가 갖는 속성

하단의 코드는 생성자 함수와 프로토타입을 사용하여 객체를 생성하는 예시이다.
예시를 통해 알아보자!

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}
let john = new Person('John');

• constructor 메서드는 클래스 내에서 객체를 초기화하는 역할을 담당한다.
• sayHello는 클래스 내에 메서드로 정의되어 있다.
• new Person('John')을 통해 Person 클래스의 인스턴스인 john 객체를 생성할 수 있다.
  john 객체는 Person 클래스의 속성과 메서드를 상속받습니다.

.proto

객체의 프로토타입에 접근하기 위해 사용되는 프로퍼티

john 이라는 객체의 프로토타입에 접근하려면 ?

john.__proto__

프로토타입의 sayHello 메서드를 호출하려면 ?

john.__proto__.sayHello()

클래스, 인스턴스, 프로토타입의 관계

Human : 클래스
Human.prototype : 프로토타입
steve : 인스턴스

코드로 적어보면 아래와 같이 표현할 수 있다.