자바스크립트 Prototype

프로토타입은 원형이라고 번역 됩니다. 즉 어떠한 것의 본래의 모습, 원래의 모습입니다. 자바스크립트는 이 프로토탑을 이용하여 객체지향을 동작합니다. 그래서 자바스크립트는 프로토타입 기반 언어라고도 불립니다.

ECMA6 표준에서는 Class 문법이 추가되었습니다. 하지만 문법이 추가된 것으로 자바스크립트가 클래스 기반으로 바뀌었다는 것은 아닙니다.

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다. 즉자기 자신을 생성하기 위해 사용된 객체원형을 프로토타입이라고 합니다.

Prototype? __proto__?

자바스크립트는 Class 기반으로 인스턴스를 생성하지 않습니다. 대신 객체의 원형인프로토타입을 이용하여 새로운 객체를 만들어나간다.

함수는 객체

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

Person.prototype.say = function(){}

자바스크립트에서 함수는 객체입니다. 위와 같은 코드를 실행 시켰을 때 자바스크립트는 2가지 객체가 생성됩니다. Person이라는 함수 객체와 이 함수의 원형을 정의한Person Prototype 객체가 생성되는 것입니다. 이 두 객체는 서로 연결되게 됩니다. 즉 서로를 참조하고 있는 형태가 되는 겁니다.

두 가지 객체

Person 객체의 프로퍼티 중 protoype은 Person Protoype를 가리키고 Person Protoype 객체의 constructor 프로퍼티는 Person 객체를 가리키게 됩니다.

var choe = new Person("choe")

이제 인스턴스를 생성해보겠습니다. new 연산자로 생성자를 통해 인스턴스를 생성하게 되면 choe 객체는 프로퍼티로 __proto__를 가지게 됩니다. 이 proto는 자신의 원형인 prototype를 참조하여 생성됩니다.

인스턴스와 프로토탑의 관계

즉 instance를 만들면 그 instance는 proto로 생성자의 prototype를 갖게 됩니다.. 즉 생성자 함수의 protype과 생성된 instance의 proto는 같은 객체를 참조하는 것 입니다.

간단한 prototype chain

console.log(choe.name);
choe.say()

choe 객체안에는 name이라는 프로퍼티가 존재합니다. 그래서 로그를 찍을 시에 정상적으로 호출되는 것을 확인 할 수 있습니다. 하지만 choe 객체안에는 say()라는 메소드는 존재하지 않습니다, 이때 자바스크립트는 __proto__를 타고 Protoype에 접근을 하게 되는데요. 이러한 현상을prototype chain이라고 합니다. 위 코드는결국 proto가 참조하고 있는 Person Prototoype를 찾아가 say라는 메소드를 찾아 실행하게 됩니다. __proto__인하여 연결되어 있어 계속하여 접근이 가능한 것입니다.