[Javascript] 프로토타입, 프로토타입 체이닝에 대한 글

 

 

프로토타입(prototype)이란?

 

자바스크립트에서 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있습니다. (가장 최상위 부모인 객체는 브라우저에서는 window, node.js에서는 global입니다.) 자바스크립트에서는 프로토타입으로 객체지향의 상속 개념을 구현하는데 이를 통해 부모 객체의 프로퍼티를 자식 객체가 사용할 수 있습니다. 프로토타입은 이런 식으로 사용되며 모든 객체에게 존재합니다. 어떤 객체가 접근할 수 있는 부모 객체를 프로토타입 객체(prototype object) 혹은 그냥 프로토타입이라고 합니다.

 

 

 

객체 리터럴로 객체를 생성하는 경우 그 객체의 프로토타입 객체는 Object.prototype 객체이다.

 

객체 리터럴 방식으로 생성한 모든 객체의 프로토타입 객체는 Object.prototype입니다.

이 말은 객체 리터럴 방식으로 생성한 모든 객체가 Object.prototype에 접근 가능하다는 것을 의미합니다.

MDN을 보면 메소드명에 대하여 항상 prototype이 들어간 풀네임을 명시해놓는데 예를 들면 이런 식입니다.

 

apply() 가 아닌 Function.prototype.apply()

 

그 이유는 apply가 Function.prototype에 할당된 메소드이기 때문입니다. 따라서 모든 함수는 apply메소드를 사용할 수 있습니다. 모든 함수가 왜 사용할 수 있는지 더 명확하게 이해하려면 아래에 있는 프로토타입 체이닝 개념까지 봐야 확실하게 이해가 됩니다.

 

Function.prototype과 마찬가지로 Object.prototype에는 모든 객체가 호출 가능한 내장 프로퍼티(메소드 포함)들이 포함되어 있습니다. 이걸로 인해 모든 객체는 자신이 직접 가지고 있는 프로퍼티가 아니더라도 Object.prototype에 속한 프로퍼티에 접근하여 사용할 수 있습니다.

 

 

 

생성자 함수로 객체를 생성하는 경우 그 객체의 프로토타입 객체는 생성자함수.prototype 객체이다.

 

앞서 객체를 리터럴 방식으로 생성하는 경우 그 객체의 프로토타입 객체는 Object.prototype 이라고 했습니다. 그러면 리터럴 방식으로 생성한 객체들은 Object.prototype의 속성이나 메소드를 상속받습니다. 이건 경우의 수가 한 가지밖에 없습니다.

 

그런데 생성자 함수로 객체를 생성하는 경우에는 그 객체의 프로토타입 객체가 '생성자함수명.prototype'이 됩니다. 또 이 생성자함수.prototype의 프로토타입 객체는 Object.prototype입니다. 이렇게 생성자 함수를 사용하여 객체를 생성하면 Object.prototype까지 프로토타입 링크가 두 번 연결됩니다.

 

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

var item = new Factory("coding");

console.log(item); // Factory {name: "coding"}
console.log(item.__proto__); // Factory.prototype
console.log(item.__proto__.__proto__); // Object.prototype

 

 

 

프로토타입 체인 (prototype chain)

 

위에서 언급했듯이 객체는 자신의 프로토타입 객체의 프로퍼티에 접근할 수 있습니다. 그냥 막 프로토타입 객체를 찾아가는건 아니고, 객체에서 프로퍼티를 접근하려 보니 자기 자신에게 그러한 프로퍼티가 없는 경우 프로토타입 객체에 혹시 그것이 있나 찾으러 가는 것입니다. 그리고 자신의 프로토타입 객체에도 그 프로퍼티가 없으면 더 상위의 프로토타입 객체에 찾으러 가서 있으면 불러옵니다. 이런 과정을 거쳐서 최종적으로는 모든 객체의 부모 객체인 Object.prototype에게까지 접근을 하게 되는데 이런 일련의 접근 프로세스를 prototype chianing이라고 부릅니다.

 

Factory 생성자 함수로 item 인스턴스를 만들고 Factory.prototype, Object.prototype으로 체이닝하는 과정을 예제로 보겠습니다.

 

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

// prototype 객체에 프로퍼티를 할당 할 수 있다.
Factory.prototype.introduce = function() {
    return "Hi! I am " + this.name + ".";
}

Object.prototype.bye = function() {
    return "Bye~";
}

var item = new Factory("coding");

// item의 프로퍼티 접근
console.log(item.name); // "coding"

// 프로토타입 체이닝 1. item에서 못찾은 메소드이므로 Factory.prototype에 접근
console.log(item.introduce()); // "Hi! I am coding."

// 프로토타입 체이닝 2. item과 Factory.prototype에서 못찾은 메소드이므로 Function.prototype에 접근
console.log(item.bye()); // "Bye~"

 

 

 

프로토타입은 처음에 이해하기 매우 어렵습니다. 다음 참고자료들을 추천합니다.

 

https://poiemaweb.com/js-prototype

Prototype | PoiemaWeb

 

책: 인사이드 자바스크립트 - 송형주, 고현준 지음 | 한빛미디어