06 프로토타입 by 코어 자바스크립트

아래 내용은 '코어 자바스크립트' 정재남 저 | 위키북스의 내용을 발췌한 것으로

 자세한 내용은 해당 서적을 확인 바랍니다. 

 

 

자바스크립트는 프로토타입 (prototype)기반 언어로 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있다.

 

var instance = new Constructor();

instance 는 Constructor 앞에 new를 붙여서 새로운 객체를 만들어 낸것으로, Constructor가 해당 instance의 프로토타입이 되는 개념이다. 보통 Object.getPrototypeOf() / Object.create() 등을 사용하기를 권장한다.

 

const Sera = new Person("Sera", 24);
Sera.getName(); // Sera
const Hesun = new Person("Hesun", 24);
Hesun.getName(); // Hesun

__proto__를 뺴면 this는 instance가 되는게 맞는데, 그 이유는 바로 __proto__가 생략 가능한 프로퍼티이기 때문이다.

애초부터 생략 가능하도록 정의돼 있었으며, 이 정의를 바탕으로 JS 전체 구조가 구성됐다고 해도 과언이 아니다.

중요한 점은 __proto__가 생략 가능하다는 점을 기억하면 된다.

 

__proto__ 프로퍼티는 생략 가능하도록 구현돼 있기 때문에 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 된다.

 

instance는 Constructor의 prototype을 참조하는데, __proto__가 생략 가능해서 push, pop, forEach등의 메서드를 자신의 것처럼 호출할 수 있다. (일부 메서드들은 인스턴스가 직접 호출할 수 없어 생성자함수에서 직접 접근해야 된다)

 

constructor 프로퍼티

생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor라는 프로퍼티가 있습니다.

인스턴트의 __proto__ 객체 내부에도 마찬가지며, 이 프로퍼티는 단어 그대로 원래의 생성자 함수(자기 자신)을 참조한다.

자신을 참조하는 프로퍼티를 굳이 뭐하러 가지고 있을까 싶은데, 이 역시 인스턴스와의 관계에 있어서 필요한 정보이다.

instance로부터 그 원형이 무엇인지를 알 수 있는 수단이기 때문이다.

 

아래 줄은 모두 동일한 대상을 가리킨다.

 

[Constructor]

[instance].__proto__.constructor

[instance].constructor

Object.getPrototypeOf([instance]).constructor

[Constructor].prototype.constructor

 

다음 줄은 모두 동일한 객체(prototype)에 접근할 수 있다.

 

[Constructor].prototype

[instance].__proto__

[instance]

Object.getPrototypeOf([instance])

 

 

어떤 데이터의 __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인(prototype chain)이라고 하며, 이 체인을 따라가며 검색하는 것을 프로토타입 체이닝(prototype chaining)이라 한다.