[자바스크립트] 프로토타입

Juhyang·2022년 3월 10일

프로토타입이 뭘까?

JS는 객체지향 프로그래밍을 지원하지만, 클래스라는게 없음
그러므로 클래스가 없으면? -> 상속도 없다.
대신 클래스 대신 프로토타입(Prototype)이라는 것이 존재하고, 이것은 상속을 '흉내' 낸다.
JS는 프로토타입 기반 언어이며, 프로토타입 그 자체이다.

프로토타입을 어떻게 쓰는지?

function Person() {
  this.eyes = 2;
  this.nose = 1;
}
var kim  = new Person();
var park = new Person();

// eyes와 nose가 총 4개 생성되므로 메모리가 낭비된다.
// 원래 자바였으면 Person 클래스 만들고 상속 받으면 됐는데.. JS는 클래스가 없는데 어쩌지?

프로토타입 사용 후

function Person() {}
Person.prototype.eyes = 2;
Person.prototype.nose = 1;

var kim  = new Person();
var park = new Person():

Person.prototype이라는 빈 Object가 어딘가에 존재하고,
Person 함수로부터 생성된 객체(kim, park)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있습니다.

프로토타입은 어떻게 상속을 구현했나?

프로토타입 체인(Prototype Chain)을 형성하여 상속
프로토타입 체인이란?
- 부모 역할을 하는 프로토타입 객체를 찾아 해당 프로퍼티 혹은 메서드를 불러올 수 있는 것
- 객체 자신의 것뿐 아니라 proto가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다.
즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 proto가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인.

var meArray = []; 
console.log(meArray.foo); 
// undefined 가 기록된다. 

/* meArray.foo, Array.prototype.foo, Object.prototype.foo 에서 foo 를 찾지 못했기 때문에 foo 는 undefined 를 기록하게 된다. */