[Javascript] 5. 프로토타입

자바스크립트를 접해보셨다면 한번쯤은 들어보셨을 프로토 타입에 대해서 알아보려고 합니다.

 

✔︎ 자바스크립트는 프로토타입 기반의 OOP를 지원

일반적으로 알고있는 OOP의 클래스와 비슷한 역할을 담당

OOP의 기본적인 특성 중 하나인 상속을 지원

 

✔︎ 프로토타입 객체? 프로토타입 프로퍼티? __proto__?

갑자기 비슷한 이름의 개념들이 튀어나오면서 많은 분들이 어려움을 겪고 있으실 겁니다.

 

🚀 프로토타입 객체 : 함수 생성할 때 자신을 통해 만들어질 개체의 원형

🚀 prototype property : 함수 개체에서 프로토 타입 개체와 연결된 속성

🚀 __proto__ ( 내부 프로퍼티 ) : 자신을 만들어낸 프로토타입 개체의 원형과 연결된 속성

 

아래의 예제에서 보시는바와 같이 함수 개체를 통해 생성한 인스턴스들은 프로토 타입 개체를 __proto__ 를 통해 참조합니다..

function Circle(){};

var c1 = new Circle();
var c2 = new Circle();

 

 

function Circle() {};

console.log(Circle);
// 출력 : ƒ Circle() { }

console.log(Circle.prototype);
// 출력 : {constructor: ƒ} => 자신의 원형으로 생성된 새로운 객체와 연결되어 생성자를 출력

console.log(Circle.__proto__);
// 출력 : ƒ () { [native code] } => 함수 프로토타입 객체를 출력

Circle.prototype.prop = "prototype value";
// 생성자로 생성한 모든 인스턴스에서 prop 값 사용 가능

var c1 = new Circle();
console.log(c1.prop);
// 출력 : prototype value

c1.prop = "instance value";

console.log(c1.prop);
// 출력 : instance value

console.log(Circle.prototype.prop);
// 출력 : prototype value

 

 

 

✔︎ 프로토 타입 체인

__proto__( 내부 프로퍼티 ) 는 그 개체에게 상속을 해 준 부모 객체를 가르킵니다.

아래의 이미지처럼 Circle 프로토 타입 개체의 내부 프로퍼티는 Object 프로토 타입 개체를 가르키게 됩니다.

따라서 개체는 __proto__가 가르키는 부모 개체의 프로퍼티를 사용할 수 있습니다.

만일 자신이 가지고 있지 않은 프로퍼티를 참조해야 하는 경우, __proto__를 따라 부모 개체의 프로터피를 검색하게 됩니다.

이러한 개체의 연결 고리는 프로토 타입 체인이라고 합니다.

 

따라서 자바스크립트는 프로토 타입 체인을 통해 개체의 프로퍼티를 다른 개체로 전파합니다.

이를 프로토 타입 상속이라고 부르며, 이러한 특성때문에 자바스크립트는 프로토타입 기반의 객체 지향 언어입니다.