자바스크립트 프로토타입 표기법에 대해

Question

자바스크립트 프로토타입 표기법에 대해

조회수 575회

javascript

0

싫어요

class Person {
  constructor() {
    this.mouse = 1;
  }
}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

const kim  = new Person();
console.log(kim);

이렇게 코드를 작성하고 파이어폭스에서 로그를 확인해 보면 결과가 아래와 같습니다.

Object {}
| mouse: 1
| <prototype>
  | constructor: function Person()
  | eyes: 2
  | nose: 1
  | <prototype>
    | __defineGetter__
    | __defineSetter__
    | ...

<prototype>이라는 글자가 두 번 나와서 헷갈리는데 어떤 게 프로토타입 객체인가요?

그리고 책에 따라서는 <prototype> 프로퍼티를 __proto__로 표기하기도 하는데 이건 브라우저에 따라 달라지는 단순 명칭 차이인가요?

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 3 · Accepted Answer

저보다 더 프로토타입을 잘 아시는분이 더 좋은 설명을 해주시길 바라면서.. 저도 질문자님의 질문의 답을 달기위해 공부하면서 답변을 적어보았습니다.

그리고 책에 따라서는 프로퍼티를 proto로 표기하기도 하는데 이건 브라우저에 따라 달라지는 단순 명칭 차이인가요?

크롬에서는 _proto_라고 나와요. 그러니까 명칭차이가 맞는것같습니다.

prototype이라는 글자가 두 번 나와서 헷갈리는데 어떤 게 프로토타입 객체인가요?

둘다 프로토타입 객체가 맞습니다.

_proto_는 현재 객체의 조상이었던 함수의 prototype Object를 가리킵니다. 이 말이 무슨뜻이냐면..

kim 은 new Person(); 을 통해 생성된 인스턴스입니다. 즉 kim의 조상은 아래의 Person 함수입니다.

class Person {
  constructor() {
    this.mouse = 1;
  }
}

그리고 Person 함수의 조상은 Object 객체입니다. 따라서 Object 의 기본 속성인 아래의 속성들을 포함하고 있는것이죠.

constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()

_proto_는 맨 아래에서부터 하나위의 조상에 접근한다고 생각하시면 될것같아요.

아래의 링크글을 한번 읽어보시면 좋을것같구요. https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

아래의 4가지 포인트를 기억하시면 좋을것같습니다.

함수가 만들어지면 , 함수와 + prototype Object 2개가 만들어진다.
.prototype 속성은 함수만 가지고 있는 속성이지만 _proto_는 prototypeObject는 다 가지고있는 속성이다.
.prototype 으로 접근한 prototypeObject 는 constructor 속성과 _proto_ 을 가진다. new 로 생성한 인스턴스는 _proto_ 속성만 가진다.
new 는 prototype 에 접근하지 않고 인스턴스를 통해 바로 원형에 접근하기 위한 방법이다.

도움이 되었으면 좋겠네요.