제대로 파는 자바스크립트(JavaScript)-by 얄코 내 멋대로 정리

백세희·2023년 6월 4일

Section 13. 프로토타입

1. 프로토타입의 개념

프로토타입 : 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원하는 언어

❓만들어진 객체는 사실 생성자 함수의 인스턴스라고 봄
빈 객체임에도 위의 메서드들이 사용 가능한 것은 프로토타입 덕분!!

console.log(
  obj.toString()
);

프로토타입 체인

최상위에 있는 것이 Object라는 것을 봤던 적이 있다.
"어떤 생성자 함수이든 prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재하게 됩니다."(코어 자바스크립트,정재남지음, 위키북스,p168)이라는 글에 이해 하기 쉽게 느껴지는 그림자료다.
코드로 프로토타입에 접근하기
1.__proto__접근자 사용 - Object.prototype의 프로퍼티
사라질 기능임

console.log(
  {}.__proto__ ,// 프로토타입을 보여줌
  [1, 2, 3].__proto__ === [4, 5].__proto__, //같은 종류는 프로토타입 공유 확인 (같은 배열이라 true 반환)
  {}.__proto__ === [].__proto__.__proto__, //최상위, 공통조상은 Object
  {}.__proto__.__proto__ //null 반환
);

저번에 책을 통해서 __proto__를 접한적이 있었다. 그 때 기억으로는 이 접근자는 생략이 가능하다고 했다.

✔ __proto__ 대신 사용

Object.getPrototypeOf([]) === [].__proto__ // true

✔ 생성자 함수에서는 prototype으로 프로토타입 접근 가능

프로토터타입 프로퍼티

function YalcoChicken (name, no) {
  this.name = name;
  this.no = no;
  this.introduce = function () {
    return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
  }
  // 본사에서 새 업무를 추가
YalcoChicken.prototype.introEng = function () {
  return `Welcome to Yalco Chicken at ${this.name}!`;
};

console.log(chain1.introEng());
console.log(new YalcoChicken('강남', 17).introEng());
}