프로토타입

임효진·2023년 1월 15일
0

자바스크립트를 공부하던 중, 프로토타입이라는 개념이 잘 이해가 되지 않았다.
이전에 C++을 공부했었는데 객체지향의 C++과 달리 자바스크립트는 객체지향 프로그래밍이 가능한 언어이기에 더욱 혼선이 있다. 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야한다는데...
이전에 프로토타입을 얕게 공부했다가 오늘 prototype과 [[Prototype]]의 차이점이 궁금하여 추가적으로 더 공부를 진행했다.

[[Prototype]] vs protoype

모든 객체는 스스로의 프로토타입 객체를 가르키는 [[Prototype]] 인터널 슬롯을 갖으며 상속을 위해 사용한다.
함수도 객체이므로 [[Prototype]] 인터널 슬롯을 갖는다. 그런데 함수 객체는 일반 객체와는 달리 prototype 프로퍼티도 소유하게 된다.

주의해야 할 것은 prototype 프로퍼티는 프로토타입 객체를 가리키는 [[Prototype]] 인터널 슬롯은 다르다는 것이다. prototype 프로퍼티와 [[Prototype]]은 모두 프로토타입 객체를 가리키지만 관점의 차이가 있다.

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

console.dir(Person); // prototype 프로퍼티가 있다.
console.dir(foo);    // prototype 프로퍼티가 없다.
  • [[Prototype]]
    함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이다.
    객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다.

  • prototype 프로퍼티
    함수 객체만 가지고 있는 프로퍼티이다.
    함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.

Prototype chain

자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다. 이것을 프로토타입 체인이라 한다.

정리

[[프로토타입]]은 함수를 포함한 모든 객체가 가지고 있는 인터널 슬롯이고 내부 슬롯에 체인의 단방향을 지키기 위해 직접적인 접근이 불가한 특징이 있다고 한다.만약 직접 접근이 가능하다면 서로가 서로의 프로토타입이 되면서 체인이 무한 루프가 되서 proto로만 접근이 가능하다.

*아직까지도 잘 이해가 되지 않는다.
좀 더 공부를 해봐야겠다.

참고 : https://poiemaweb.com/js-prototype

profile
프론트 요정임

0개의 댓글

관련 채용 정보