오브젝트 프로토타입

JavaScript : 프로토타입의 이해 > 

MDN_Object Prototypes >

생활코딩_prototype > 

 

 

JavaScript는 기존의 객체를 복사(cloning)하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다.

 

 

1. 함수와 객체의 내부 구조 이해

1) 함수 정의

• 함수 멤버로 prototype속성이 있다. 이 속성은 다른 곳에 생성된 함수이름의 프로토타입 객체를 참조한다. 
• 프로토타입 객체의 멤버인 constructor속성은 함수를 참조하는 내부구조를 가진다.

function Person(){}

 

2) Person함수를 통해 객체 생성

 

• Person 함수의 prototype속성이 참조하는 프로토타입 객체는 new라는 연산자와 Person함수를 통해 생성된 모든 객체의 원형이 되는 객체이다.
• 원형 객체내에 prototype속성이 있다면 인스턴스 생성이 가능하고, 없다면 인스턴스를 생성하지 못한다.
• 생성된 객체 안에는 proto(비표준) 속성이 있다. proto 속성은 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 숨은 링크로 참조하는 역할을 한다.

 

function Person(){}

# 인스턴스 생성 
var joon = new Person(); 
var jisoo = new Person();

 

 

2. 프로토타입 객체

프로토타입 객체는 새로운 객체가 생성되기 위한 원형이 되는 객체이다. 같은 원형으로 생성된 객체가 공통으로 참조하는 공간이다.

• 같은 원형을 복사로 생성된 모든 객체는 추가된 멤버를 사용할 수 있다.

# 함수 안의 prototype속성을 이용해 멤버 추가
Person.prototype.getType = function(){
    return "인간";
};

console.log(joon.getType); //인간
console.log(jisoo.getType); //인간

• 프로토타입 객체의 멤버를 읽는 경우, 객체 또는 함수의 prototype속성을 통해 접근할 수 있다. 하지만, 프로토타입 객쳉에 멤버를 추가, 수정, 삭제할 경우, 함수 안의 prototype속성을 통해 접근해야 한다.

Person.prototype.getType = function(){
    return "인간";
};

joon.getType = function(){
    return "사람";
};

console.log(joon.getType); //사람
console.log(jisoo.getType); //인간

jisoo.age = 25;

console.log(joon.age); //undefined
console.log(jisoo.age); //25

joon객체를 사용하여 getType()을 호출하면 프로토타입 객체의 getType()을 호출한 것이 아니라, joon객체에 추가된 getType()을 호출한 것이다.

 

 

 

 

 

 

• 프로토타입 객체의 멤버를 수정할 경우는 멤버 추가와 같이 함수의 prototype속성을 이용하여 수정한다.

Person.prototype.getType = function(){
    return "사람";
};

console.log(jisoo.getType()); //사람

 

 

3. 프로토타입

프로토타입은 크게 프로토타입 객체를 참조하는 prototype 속성과 객체 멤버인 proto 속성이 참조하는 숨은 링크 두가지로 해석된다.

• 함수의 멤버인 prototype 속성은 프로토타입 객체를 참조하는 속성이다. 함수와 new연산자가 만나 생성한 객체의 프로토타입 객체를 지정해주는 역할을 한다.
• 프로토타입 객체를 이용하여 만들어진 객체 안의 __proto__ 속성은 자신을 만들어낸 원형인 프로토타입 객체를 참조하는 숨겨진 링크로써 프로토타입을 의미한다. 이 숨겨진 링크가 있어 프로토타입 객체 멤버에 접근할 수 있다.

 

 

4. 프로토타입 체인

특정 객체의 메서드나 프로퍼티에 접근하고자할 때, 해당 객체에 접근하려고 하는 프로퍼티나 객체가 없다면 프로토타입 링크([[Prototype]] 프로퍼티)를 따라 자신의 부모 역할을 하는 프로토타입 객체를 차례로 검색한다. 이를 프로토타입 체인이라 한다.

function Ultra(){}
Ultra.prototype.ultraProp = true;

function Super(){}
Super.prototype = new Ultra();

function Sub(){}
Sub.prototype = new Super();

var o = new Sub();

console.log(o.ultraProp); //true

위 코드에서 생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 Sub.prototype.ultraProp를 찾는다.
3. 없다면 Super.prototype.ultraProp를 찾는다.
4. 없다면 Ultra.prototype.ultraProp를 찾는다.

prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.

 

※ 객체 생성 방법

1. 객체 리터럴 이용
var o = {};

2. new연산자를 이용해 객체 생성
var o = new Sub();

1번 방법은 빈 객체를 생성하는 것과 달리 2번 방법은 객체가 가지고 있어야 할 기본적인 프로퍼티를 가지고 우리에게 주어지게 된다.