[JavaScript]프로토타입 알아보자

쫀구·2022년 5월 25일

📌 prototype 프로토타입

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다.
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미

모든 객체는 최소한 하나 이상의 다른 객체로부터 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.
상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라 한다.
정확히 말하자면 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. -MDN-

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

🤔 왜 알아야할까?

JavaScript는 프로토타입 기반 언어이고
프로토타입 체인을 사용하여 객체 지향 프로그래밍의 특성 중 상속을 구현한다.

즉 흔히 사용하는 것들 .length , .slice 같은 메서드를 사용하는것 자체가 이미 프로토타입을 통해 상속 하는 중인 것이다. .__proto__ 를 통해 부모를 찾으면 결국 Object 클래스에 속해 있음을 알 수있다. (프로토체인 페이지에 정리 했으니 확인)

💡 프로토타입에 새로운 객체 추가도 가능

String.prototype.abc = ‘zzzzzz’;

입력시 String 포토타입 객체안에 추가된다. {abc : ‘zzzzzz’}

🔍 프로토타입 확인

콘솔창에 String.prototype 를 입력해보면 수많은 메서드가 저장되어 있다

.__proto__ 은 프로토타입 링크라고 불리며, 프로토타입 객체 안에 접근하기위한 방법

.__proto__를 이용하면 부모 클래스의 프로토타입 부터 '부모의 부모' .. 조상 클래스 까지 프로토타입을 탐색할 수 있다.

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

class 를 생성할때 onstructor, new 를 반드시 사용하여 인스턴스를 만든다.
park에 새로운 인스턴스를 할당시키면 Human의 프로토타입을 상속받는다.
Human 의 프로토타입 안에 있는 메서드 .sleep 을 사용할 수 있다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

let park = new Human('park', 30); // 깊은복사