객체 지향 언어 - 프로토타입 기반 언어(JS)

책 <러닝자바스크립트>를 기본으로 배운 자바스크립트 내용입니다.

 

목차

• <객체 지향 언어>
• 클래스 기반 언어 vs 프로토타입 기반 언어(JS)
• <프로토타입 기반 언어>
• 1. property
• 2. 프로토타입 (개념 설명)
• 3. 프로토타입 기반 언어

 

<객체 지향 언어>

객체 지향 언어는 크게 두 가지 줄기로 나눌수 있다.

• 클래스 기반 언어(C++, Java, C#, Ruby, Python 등)
• 프로토타입 기반 언어(JavaScript, ActionScript, JScript 등)
• 클래스 기반 & 프로토타입 기반 객체 지향 언어

<프로토타입 기반 언어>

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 (마치 객체 지향의 상속 개념과 같이) 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.

Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.

 

1. property

1-1) property

• property는 해당 object의 특징이다.
• property는 보통 데이터 구조와 연관된 속성을 나타냅니다.
• property는 이름(a string)과 값(primitive/method/object reference)을 가지고 있다.
• "프로퍼티가 object를 가지고 있다" = "property가 object reference를 가지고 있다"를 줄인말로 property의 값이 변한 후에도 object는 그대로 남아있다.

1-2) property의 류

• 인스턴스 property : 특정 object 인스턴스의 특정한 데이터를 가지고 있다.
• Static Property : 모든 object 인스턴스들에게 공유 된 데이터를 가지고 있다.

1-3) property에 접근 방식

objectName.property      // person.age
objectName["property"]   // person["age"]
objectName[expression]   // x = "age"; person[x]

 

 

2. 프로토타입

• "원형"이라는 의미
• 프로토타입을 이용하면 객체와 객체를 연결하고, 한쪽 방향으로 상속(멤버 함수나 멤버 변수를 공유)을 받는 형태를 만들 수 있다. 이 형태가 프로토타입 체인이다.

2-1) 프로토타입 생성

함수 생성하면 프로토타입 객체도 동시 생성된다. 단순히 생성만 된 것이 아니라 함수에서는 프로토타입 객체에 prototype이라는 내부변수로 접근 할 수 있고, 프로토타입에서는 constructor라는 변수로 함수에 접근 할 수 있게 된다. 서로를 참조하는 레퍼런스 변수를 통해 두 객체는 접근 뿐만 아니라 변경도 가능하다.

# 프로토타입 생성

function Foo (){}
Foo.prototype.proto_val = '원형 값';

Foo.prototype.constructor.construct_val = "생성자 값";

console.log(Foo.prototype.proto_val); //원형 값 을 출력
console.log(Foo.construct_val); //생성자 값 을 출력
console.log(Foo.proto_val); // undefined를 출력 

위 코드의 맨 마지막 줄을 보면 알 수 있듯이 함수 스스로 프로토타입 값을 얻을 수 없습니다. 따라서 new키워드로 인스턴스를 생성해 다른 방식으로 프로토타입 값을 얻을 수 있다.

function Foo(){
    //var this = {}; this가 생성이 됩니다.  
    //이 this는 dunder proto라는(__proto__)라는 참조변수로 프로토타입 객체를 참조합니다.
    //return this; this가 반환됩니다.
}
var foo_instance = new Foo();

위의 코드와 같이, new를 할 경우 this 객체가 생성되며, 또한 반환되어 foo_instance에서 해당 객체를 사용할 수 있게 된다. 이 this는 Foo의 프로토타입을 가르키게 되고, (Foo 함수객체와는 다르게) this가 가지고 있는 내부 변수인 proto는 Foo의 함수에 직접 접근 할 수 있는 권한을 가지게 된다.

※접근 할 수 있다는 의미보다는 프로토타입에 있는 값을 고스란희 복제해서 가져온다는 의미가 적절하다.

 

2-2) 프로토타입과 객체의 메모리가 관리, 참조되는 방식

• 인스턴스에서 프로토타입의 속성에 접근만 하는 경우 :  프로토타입에 값이 있는지 확인한 뒤에 참조.
• 인스턴스에서 프로토타입 속성으로 연산을 하려고 할 경우 : 인스턴스에 메모리가 주어지고, 프로토타입의 속성을 호출하여 받은 값을 연산하여 할당된 메모리에 저장. (할당받은 메모리로 인스턴스는 고유의 속성을 가짐.)

 

2-3) 프로토타입 개념을 사용할 때의 주의할 점

• 인스턴스 자체에서도 프로토타입에 직접 접근하여 프로토타입에 있는 기본값을 instance에서 바꿔버릴 수도 있다.
• 다른 언어 같은 경우 class를 걸어 넣고 객체를 생성할 경우 객체에서는 클래스를 건드릴 수 없어 각각의 객체들이 원형이 변경될 위험으로부터 보호받을 수 있지만, 자바스크립트에서는 생성자인 함수뿐만 아니라 생성자로부터 만들어진 객체까지 원형에 손을 댈 수있고, 그 과정이 컴파일 과정도 아니고 런타임에서 일어나므로 자바스크립트의 프로토타입 개념을 사용 할 때는 조심해야 한다.

 

 

3. 프로토타입 기반 언어

• 프로토타입 기반 언어에서는 클래스라는 개념이 존재하지 않으며, 여러 종류의 Built-in 객체들이 시스템상에 존재하게된다.
• 클래스 기반 언어의 상속 개념과 달리, 프로토타입 기반 언어는 객체를 원형(프로토타입)으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다. - 자바스크립트는 프로토타입 복제보다는 프로토타입 링크를 통해 원형 참조.