[Javascript] Prototype 이란?

 

객체지향 프로그래밍이란?

 

Javascript는 명령형, 함수형, 프로토타입 기반 객체 지향 프로그래밍 언어로 정의할 수 있다. 기존 객체지향 언어와 차이점이 있다면 객체 지향 언어보다 효율적인 객체지향 프로그래밍 능력을 가진 프로토 타입 기반의 객체지향 언어라는 점이다.

먼저 객체지향 프로그래밍이란 뭘까?

자바스크립트 언어를 이루고 있는 거의 모든 것은 일단 객체다. 원시타입 데이터를 제외한 함수, 배열, 정규 표현식 모두가 객체(Object) 타입을 가진다.

객체는 실생활의 사물들을 객체로 표현하고 모든 객체는 속성을 가진다는 패러다임에서 시작한다. 프로그래밍을 하기 위해 필요한 속성값들을 모아놓은 것을 추상화라고 한다. 이 처럼 필요한 속성값만 모아 놓은 복합적인 자료구조를 객체라고 칭하며, 독립적인 객체들의 집합으로 프로그램을 작동시키는 방식을 객체지향 프로그래밍이라고 한다.

객체는 크게 멤버(속성)과 메소드(함수)로 구성된다. 객체의 현재 상태를 저장하는 멤버 변수들과 상태 데이터를 조작할 수 있는 메소드가 결합되어 객체를 구성한다. 

기존의 명령형 프로그래밍 혹은 절차식 프로그래밍에서 순서가 중요했다면 객체지향 프로그래밍에서는 독립적인 객체간의 관계를 중시한다. 객체를 연결하고 정리하면서 프로그램의 전체적인 틀을 구성할 수 있다. 

 

 

Javascript Prototype 이란 ?

 

Javascript에서는 프로토타입 기반으로 상속을 구현한다. 상속이란 상위 클래스의 멤버와 메소드를 하위 클래스에서 사용할 수 있는 패턴이다. Javascript에서는 프로토타입을 기반으로 상속을 진행하여 불필요한 중복을 제거한다. 

상위 클래스의 prototype에 저장된 프로퍼티와 메소드를 하위 클래스에서 모두 상속받게 된다. 상위 클래스에서 생성자 함수가 생성할 모든 인스턴스가 사용할 수 있도록 멤버와 메소드를 구성하면 중복된 코드를 손쉽게 제거할 수 있다.

프로토타입(Prototype) 객체는 객체지향 프로그래밍에서 상속을 구현하기 위해 사용되는 객체다. Javascript의 모든 객체는 [[Prototype]]이란 내부 슬롯을 가지고 있다. 내부 슬롯의 값은 프로토타입의 참조값이 저장된다. 

프로그래머가 Javascript의 [[Prototype]] 내부슬롯에 직접 접근할 수는 없다. 하지만 "__proto__" 접근자 프로퍼티를 사용하면 자신의 프로토타입 내부슬롯이 가리키는 프로토타입에 간접적으로 접근이 가능하다. 

 

__proto__ 접근자 프로퍼티

 

Chrome에서 객체를 생성한다. 객체 프로퍼티를 자세히 살펴보면 [[Prototype]]을 가지고 있고, 그 안에 "__proto__" 접근자 프로퍼티를 가지고 있다. [[Prototype]] 내부슬롯과 동일한 프로퍼티를 가지고 있는 것을 확인할 수 있다.

 

 

 

__proto__는 접근자 프로퍼티다. 자바스크립트에서는 내부 슬롯과 내부 메서드에 접근하거나 호출하는 방법을 제공하지 않는다. 당연히 [[Prototype]] 내부슬롯에도 직접적으로 접근이 불가능하다. 

접근자 프로퍼티는 자체적으로 값을 가지지 않는다. 다른 데이터 프로퍼티의 값을 GET 하거나 저장할 때 사용된다. [[Get]], [[Set]] 프로퍼티 어트리뷰트로 구성된 프로퍼티다.

 

__proto__ 접근자 프로퍼티를 통해 [[Prototype]] 내부슬롯에 접근하면 __proto__ 접근자 프로퍼티의 [[Get]] 함수가 호출된다. __proto__접근자 프로퍼티를 통해 [[Prototype]] 내부 슬롯에 새로운 값을 할당하면 [[Set]] 함수가 호출된다. 

 

예제

임의 객체를 생성한다.

const user = {
	name : 'About-Tech',
}

 

생성된 객체 [[Prototype]]에 __proto_ 접근자 프로퍼티를 사용해 접근하여 [[get]] 함수를 실행한다.

 

객체에 __proto__ 접근자 프로퍼티를 사용해서 [[set]] 함수를 호출하고, [[Prototype]] 내부 슬롯에 새로운 값을 할당한다. user 프로퍼티 하위에 [[Property]] 내부슬롯에 새로운 프로퍼티가 설정된 것을 확인할 수 있다.

 

 

__proto__ 접근자 프로퍼티 사용하는 방법

 

__proto__ 접근자 프로퍼티는 상속을 통해서 사용된다. 객체가 직접 소유하는 프로퍼티가 아닌, Object.prototype의 프로퍼티이므로 모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용하게 된다.

 

__proto__ 접근자 프로퍼티는 모든 객체의 프로토타입 객체 Object.prototype에 접근하는 접근자 프로퍼티다. guest 객체의 __proto__와 Object.prototype이 완전히 일치한다.

 

Javascript의 모든 객체는 프로토타입의 계층 구조인 프로토타입 체인으로 연결되어 있다. 자바스크립트 엔진에서 객체의 프로퍼티에 접근할 때 해당 객체에 접근할 프로퍼티가 없는 경우 __proto__ 접근자 프로퍼티가 가리키는 참조를 따라서 자신의 부모 역할을 하는 [[Prototype]]의 프로퍼티를 순차적으로 검색하게 된다.

자바스크립트의 [[Prototype]]의 최상단에는 Object.prototype이 존재하며, 모든 객체에 상속된다. 즉 자바스크립트 환경의 모든 객체에서 Object.prototype 프로퍼티에 접근이 가능하고 사용이 가능하다. 임의로 생성한 guest 객체의 [[Prototype]]은 Object.prototype을 상속받고 있다.