Today I Learn...

프로토타입 기반 언어?

---

자바스크립트: 프로토타입 기반 언어
프로토타입(Prototype): 원형 객체(유전자)

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미

📌 프로토타입 체인(prototype chain)

• 함수에는 프로토타입이라는 프로퍼티(속성)가 존재

• 프로토타입 속성을 통해 생성자 함수는 인스턴스에게 프로토타입 객체에 있는 데이터, 메소드를 상속 🔽

  • 인스턴스 객체의 key에 접근할 때, 해당 객체에게 key가 없다면 그 다음으로 상위 프로토타입(원형) 속성에서 key가 있는지 확인 🔼
  • 없다면 그것을 찾기 위해 더 상위의 프로토타입(부모)에서 확인 ⏫

• 생성자의 프로토타입 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현
  예시) person1.__proto__

• 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것은 아니다! 그저 체인을 타고 올라가며 접근할 뿐...

❗️ 상속되는 속성과 메소드들 --> 객체의 생성자의 prototype이라는 속성에 정의되어 있다! (각 객체가 아님을 주의)

프로토타입 속성

---

📌 상속 받은 속성과 메소드들은 어디에 정의되어 있을까?? 💁‍♀️

• 상속 받는 멤버들은 프로토타입 속성에 정의되어 있다

• Object.로 시작하는게 아니라, Object.prototype.으로 시작

• 프로토타입 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체

• 모든 생성자 함수는 constructor 속성을 지닌 객체를 프로토타입 객체로 가진다

📌 클래스와 인스턴스, 그리고 프로토타입의 관계

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

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

let kimcoding = new Human('김코딩', 30);

Human.prototype.constructor === Human; //true
Human.prototype === kimcoding.__proto__; //true
Human.prototype.sleep === kimcoding.sleep; //true

프로토타입 속성 수정

---

• 프로토타입에 메소드를 추가하면 해당 생성자로 생성된 모든 객체에서 사용 가능~

• 속성 : 생성자에서 정의
  메소드 : 프로토타입에서 정의

  --> 생성자에는 속성에 대한 정의만 있으며 메소드는 별도의 블럭으로 구분할 수 있으니 코드를 읽기가 훨씬 쉬워진다!

// 생성자에서 속성 정의

function Test(a, b, c, d) {
  // 속성 정의
}

// 첫 메소드 정의

Test.prototype.x = function() { ... };

// 두번째 메소드 정의

Test.prototype.y = function() { ... };

[참고]

Object prototypes - Web 개발 학습하기
[JavaScript] 프로토타입과 프로토타입 체인