프로토타입?

---

JavaScript는 프로토타입 기반의 언어다.

프로토타입에 기반하여 객체지향 프로그래밍을 지원한다.

JavaScript의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어있다. 이 부모 객체를 프로토타입 객체 또는 프로토타입이라고 한다.

.prototype

---

함수 객체만 가지고 있는 property

같은 생성자로부터 만들어진 객체들은 모두 원형 객체를 공유한다.

함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(prototype 객체)를 가리킨다.

prototype객체란 어떠한 객체가 만들어지기 위해 그 객체의 모태가 되는 객체이고 하위 객체들에게 물려줄 속성들이다

• prototype 예시코드

  function 근성장(운동, 휴식) {
  	this.운동 = 운동;
  	this.휴식 = 휴식;
  }
  
  근성장.ptorotype.영양소 = "단백질섭취";
  // => 현재 존재하고 있는 "근성장" prototype에 "영양소" property를 추가
  
  근성장.prototye.운동루틴 = function() {
  	return this.운동 + " " + this.영양소;
  // => 현재 존재하고 있는 "근성장" prototype에 "운동루틴" method를 추가
  
  let 하체운동 = new 근성장("스쿼트","8시간수면");
  
  document.write("운동 후에는" + 하체운동.영앙소 + "한시간 안에 필수!"
  

  💡 직접 생성한 프로토타입은 위와 같이 새로운 property나 method를 마음껏 추가하거나 삭제할 수 있다. 자바스크립트 표준 객체의 프로토타입도 임의 수정 가능하나 심각한 오류가 발생할 수 있다. 따라서 자바스크립트의 표준 객체의 프로토타입은 수정하면 안된다.

proto

---

함수를 포함한 모든 객체가 갖고 있는 인터널 슬롯이다

객체의 입장에서 자신의 부모역할을 하는 property객체를 가리킨다.

• 예시코드

  FuncEx.prototype === {constructor: {}, __proto__: {}}
  
  // 프로토타입 객체와 매핑된 함수
  FuncEx.prototype.constructor === function FuncEx(){ this.name = 'jaen' } 
  
  FuncEx (함수객체 :: prototype 속성) <-> FuncEx.prototype (prototype 객체 :: constructor 속성)

💡 prototype 프로퍼티는 함수의 입장에서 자신과 링크된 자식에게 물려줄 프로토타입 객체를 가리키고 __proto__ 프로퍼티는 객체의 입장에서 자신의 부모 객체인 프로토타입 객체를 내부의 숨겨진 링크로 가지고 있는 것이다.

prototype 프로퍼티 vs proto

---

• 공통점 프로토타입 객체를 가리킨다
  
• 차이점 prototype : 함수 객체(Function.prototype)에서만 가지는 속성 값 proto : 모든 객체에서 가지는 링크
  

프로토타입 체인(Prototype Chain)

---

특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 proto가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다.

• 객체생성방법 3가지

1. 리터럴 방식
2. Object 생성자 함수
3. 생성자 함수

자식은 부모에 정의된 속성이나 method를 사용 가능하다.

이러한 속성이나 method에 접근해서 사용하는 것을 프로토타입 체이닝 이라고 한다.

참고

https://iamsjy17.github.io/javascript/2019/06/10/js33_17_prototype.html

https://velog.io/@jechoi27/내-머리속-JS-10-Prototype