[💻 코드스테이츠 FE 44기][part 3] 프로토타입

✔️ 시작

프로토타입이 무엇인지 학습했다.

📍프로토타입(Prototype)

• Javascript는 프로토타입 기반 언어이다.
• Javascript에서 객체를 상속하기 위해 프로토타입 방식을 사용한다.
• 프로토타입은 원형객체(original form)이다.
• 모튼 객체들은 메소드와 속성들을 상속받기 위한 템플릿으로 프로토타입 객체(prototype object)를 가진다.

프로토타입 체인(prototype chain)

프로토타입 객체도 또 다시 상위 프로토타입 객체로 부터 메서드와 속성을 받을 수도 있고 그 상위 프로토타입 객체도 동일하다.

[프로토타입 객체] ⬅︎ 상속 ⬅︎ [상위 프로토타입] ⬅︎ 상속 ⬅︎ [상위 프로토타입]

• 상속되는 속성과 메서드들은 객체의 생성자 prototype 이라는 속성에 정의 되어있다.

__proto : 개별 객체의 속성

prototype : 생성자의 속성

배열(Array) = Array 클래스 인스턴스

• 배열(arr)은 Array의 인스턴스 이며 프로토타입 관계이며 해당 프로토타입에는 다양한 메서드가 존재한다.

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

클래스

• 세부 사항(속성)이 들어가지 않은 청사진

  일종의 원형(original form)객체를 생성하기 위한 아이디어 청사진

인스턴스 (인스턴스 객체)

• 클래스를 통해 만들어진 객체

  클래스의 사례(instance object)

생성자 함수

• 세부사항(인스턴스)를 넣는 방법 ➡︎ 생성자를 통해 세부사항(속성)을 넣어준다.

  클래스는 객체를 만들기 위한 생성자(constructor)함수를 포함한다.

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

class Human { // 클래스
  constructor(name, age) { // 생성자 함수
    this.name = name;
    this.age = age;
  }
  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}
let Jieun = new Human('지은', 27); // 인스턴스

[사람] ➡︎ .prototype ➡︎ [사람.prototype(.sleep)] ➡︎ new Human() instantiation ➡︎ [지은(.sleep)]**

[사람] ⬅︎ .constructor ⬅︎ [사람.prototype(.sleep)] ⬅︎ proto ⬅︎ [지은(.sleep)]

✏️ 마치며

프로토타입은 원형객체이며 Javascript는 프로토타입 기반 언어이다.
이외 __proto, prototype이 무엇인지 어떤 식으로 사용하는지 알 수 있던 시간이였다.