Prototype

Prototype 프로토타입

자바스크립트는 다른 클래스 기반 객체 지향 언어와는 달리 프로토타입 기반 객체 지향 언어(prototype based language)라고 불린다. 그리고 자바스크립트에서 프로토타입이란 단어의 뜻 그대로 '원형'이라는 의미다. 자바스크립트에서는 이런 템플릿의 역할을 하는 프로토타입을 통해 상위 객체의 속성과 메소드를 상속받아 사용할 수 있다. 그리고 이렇게 줄줄이 상위 객체 프로토타입의 속성과 메소드를 상속받아 사용하는 형태를 프로토타입 체이닝(prototype chaining)이라고 한다.

자바스크립트의 모든 객체는 자신을 생성한 객체 원형에 대한 숨겨진 연결을 갖는다. 이때 자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이라고 한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었기때문에 이 연결의 끝은 Object 객체의 Prototype Object 다.

자바스크립트에서 객체를 하나 생성한뒤 콘솔에 찍어보면, __proto__ 라는 게 있다는 것을 확인할 수 있다. 이게 객체원형에 대한 숨겨진 연결 link이다. 그리고 아래 코드처럼 확인을 해보면, obj는 Object를 자신의 프로토타입으로 사용해 만들어졌다는 것을 알 수 있다.

let obj = {};
obj.__proto__ === Object.prototype; //true

new 키워드

위에서 __proto__와 prototype의 관계를 확인하기 위해 객체리터럴 {}로 객체를 생성했을텐데, new 키워드와 함수 Object()로도 인스턴스 객체를 만들어줄 수 있다.

let obj = new Object();

Prototype Object / Prototype property

위에서 본 것처럼 자바스크립트 객체는 함수로 생성된다. 자바스크립트에서 기본으로 제공되는 함수 객체 Object와 마찬가지로 Function, Array도 모두 함수로 정의되어 있다.

함수가 정의될 때 아래와 같은 2가지 일이 이루어진다.

1. 해당 함수에 constructor 자격 부여.

• 함수에 constructor 자격이 부여되면 new 키워드를 통해 인스턴스 객체를 생성할 수 있다. 즉, 아래코드와 같이 함수만 new 키워드를 사용할 수 있다.

let obj1 = {}; 
let obj2 = new Object(); //인스턴스 객체 'obj2' 생성 가능.
//----
let a = new obj1(); //ERR: obj1 is not a constructor.```

2. 해당 함수에 Prototype Object 생성 및 연결.

• 함수를 정의하면 함수 생성과 동시에, Prototype Object라는 새로운 분신 객체도 같이 생성이 된다. 프로토타입이 객체를 만들어내기 위한 원형이라면, Prototype Object는 자기 자신을 원형으로 삼아 만들어질 다른 객체가 참조할 프로토타입이다. Prototype Object은 constructor와 __proto__를 기본 속성으로 갖는다.

• 함수의 Prototype Object 생성을 통해 알 수 있는 건, 프로토타입은 객체를 생성하게 한 자신의 원형 객체이지만, 프로토타입이 곧 함수 객체 그 자체는 아니라는 것이다.

• __proto__라는 프로토타입에 대한 연결 link은 상위 프로토타입에 대한 정보이며, prototype property는 자신을 원형으로 만들어질 하위 객체들에게 물려줄 연결 link에 대한 속성(property)이다.

  아래 그림과 코드를 보면 더 잘 이해가 된다.

const arr = new Array();
---
Array.prototype.constructor === Array //true
Array.prototype.__proto__ === Object.prototype //true
---
arr.constructor === Array //true
arr.__proto__ === Array.prototype //true
arr.__proto__.constructor === Array //true
--- 
Array.constructor === Function //true
Object.constructor === Function //true
Array.__proto__ === Function.prototype //true 
Object.__proto__ === Function.prototype //true
--- 
Object.prototype.__proto__ === null //true <-- 주의할 것 !

클래스 개념이 없는 자바스크립트에서 함수와 new 키워드, prototype chaining 으로 클래스 상속을 비슷하게 구현해 객체 지향 프로그래밍을 할 수 있다. ES6문법에서 class 키워드가 추가되어 훨씬 편리하게 클래스 상속을 구현할 수 있게 되었지만, 이는 일종의 syntactic sugar 이고, 자바스크립트가 클래스 기반 OOP언어로 바뀌었다는 뜻은 아니라는 점!

레퍼런스: https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes ,
https://poiemaweb.com/js-prototype ,
http://insanehong.kr/post/javascript-prototype/

일단 여기까지가 이해한 부분이고, 자바스크립트에서 함수와 객체에 관한 내용과 프로토타입의 더 정확한 내용들은 다시 공부해서 정리해야겠다.