[ JS ] Prototype

728x90

0. 개요

js에 대한 깊은 이해를 통해 최적의 성능을 낼 수 있는 웹애플리케이션 개발을 위해 개발언어로서 JS의 기본을 공부하기로 했습니다.그 시작으로 js의 근간이 되는 prototype에 대한 개념과 활용에 대하여 공부했습니다.

1. 학습목적

개발언어적 관점에서의 javascript 분석

깊은 이해를 통한 최적화된 js 프로그래밍 지향

2. 학습내용

1) Javascript 소개

Javascript는 가벼운, 인터프리터 혹은 jit (just-in-time) 컴파일 프로그래밍 언어로, 일급함수를 지원하는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적언어 입니다.

- MDN Web Docs

MDN의 소개와 같이 js는 여러가지 특징을 가진, 특히 이 게시물에서 알아볼 '프로토타입' 기반 언어입니다.

2) Javascript 자료형

Javascript에는 자료형이 몇개 없습니다.

boolean, number, string, object와 null, undefined이 전부입니다.

배열이나 함수 등 위에 적혀있는 것을 제외한 모든 데이터는 전부 object, 즉 객체로 구현됩니다.

또한, 객체는 함수를 통해서만 생성될 수 있습니다.

따라서 아래와 같은 코드도:

let test_object = {};

결국 이런 함수를 실행하는 것과 같은 결과를 가집니다:

let test_object = new Object();

3) Prototype

~~한마디로 정리하자면 "상속기능을 구현하기 위한" 수단입니다.~~

prototype은 객체지향의 상속 개념과 같이 프로퍼티(property)나 메소드(method)를 상속받아 사용할 수 있도록 해주는 개념을 말합니다. '원기'라는 사전적 정의로 이해해도 무방합니다.

Java 등의 언어와는 달리, js는 위에서의 언급과 같이 prototype 기반 언어라 class라는 개념이 존재하지 않습니다.

Class 개념이 존재하지 않는다는 것은 우리가 Java에서 사용하던 상속개념을 사용하는것이 불가능하다는 것을 의미하죠.

따라서 효율적인 프로그래밍을 위해 필요한 상속기능을 따라하기 위해 위에 취소선으로 그어놓은 문장과 같이 prototype을 사용해 상속관계를 표현합니다.

이를 위해 모든 객체와 그 객체의 근간이 되는 부모객체는 서로 연결되어있는데, 이 연결관계를 체인 (Chain)이라 합니다.

마치 자료구조의 LinkedList와 비슷한 느낌입니다.

4) Prototype의 종류

Prototype은 2가지 개념을 묶어서 부르는 말입니다.

첫번째 묶여있는 개념은 Prototype Object 입니다.

4-1) Prototype Object

Prototype Object란 어떤 함수의 정의를 통해 생성되는 prototype 정보를 담은 객체를 말합니다.

보다 자세한 설명을 위해 브라우저 엔진이 js를 해석할 때 이루어지는 작업을 살펴보겠습니다.

만약 우리가 아래와 같은 코드를 통해 함수를 정의한다면:

function Laptop() {}

브라우저는 2가지 작업을 동시에 진행합니다.

1 ) 함수에 생성자 자격 부여 (Constructor)

'new'라는 키워드를 사용해본 적 있을겁니다.

new 키워드는 어떤 객체를 새롭게 생성하는 키워드를 말합니다.

이렇게 새로운 객체를 생성하는 것을 '생성자 (Constructor)'라고 하는데, 함수는 정의될 때 이 자격을 받아 new 키워드를 통해 객체를 생성할 수 있게 됩니다.

2 ) 해당 함수에 대한 Prototype Object 생성 & 연결

동시에 시행되는 또다른 작업중 하나는 지금 공부중인 Prototype Object에 대한 생성과 연결입니다.

상속관점에서 함수에 대한 정체성 정보를 가지고 있는 Prototype Object는 'costructor'와 '__proto__'라는 2가지 속성을 가집니다.

'constructor' 속성은 이 객체가 생성된 근원이 되는 함수를 가리킵니다.

'__proto__'속성은 Prototype Link입니다.

~~(아래에서 자세히 보지만, Prototype Link는 쉽게말해 다른 Prototype Object를 가리키는 link를 말합니다.)~~

동시에, 함수에서도 Prototype Object에 접근하기 위한 속성이 한가지 생깁니다.

이 속성이 바로 prototype 입니다.

이 2가지 작업을 진행하면, 함수는 다음과 같은 연결관계를 가지게 됩니다.

4-1) Prototype Link (=proto)

위에서 취소줄로 그어놓은 문장을 보신분들은 대충 감을 잡으셨겠지만, Prototype Link는 다른 Prototype Object를 가리킵니다.

조금 더 정확히 말하자면, Prototype Link는 객체가 생성될 때 그 조상이었던 함수의 Prototype Object를 가리킵니다.

위의 예시에서는 Laptop 함수의 Prototype Object의 __proto__ 속성값은 Object의 Prototype Object 입니다.

또한 부모가 아닌 조상 함수의 Prototype Object를 가져오므로, Laptop 함수 내부에 MacbookAir라는 함수가 선언되어도 아래 등식이 성립합니다. 둘다 Object 함수의 Prototype Object를 가리키죠.

MacbookAir.prototype.__proto__ === Laptop.prototype.__proto__

주의할 점은 new 키워드로 객체를 생성하는 경우엔 이야기가 달라진다는 점입니다.

new 키워드를 통해 새롭게 생성된 객체는 객체를 생성하도록 한 함수의 Prototype Object를 조상으로 합니다.

하지만 만약 객체를 생성하도록 한 함수가 특정 값을 반환한다면, new 키워드를 통해 새롭게 생성된 객체는 반환되는 값의 조상 Prototype Object를 __proto__ 속성값으로 합니다.

아래는 제가 공부하면서 테스트해본 코드입니다.

마지막 코드를 통해 함수의 선언위치는 __proto__ 속성값에 영향을 주지 않음을 알 수 있다.

5) 활용

js의 prototype을 활용해 많은 기능들을 구현할 수 있습니다.

5-1) 자료형 전역 메소드 설정

특정 자료형에 해당하는 모든 값에 대한 전역 메소드를 설정 할 수 있습니다.

예를 들어, object array에서 array를 전부 string으로 출력해야하는 경우가 생겼다고 합시다.

Array.toString 함수는 내부값이 string이 아니기 때문에 정상적인 object 값이 아닌 '[ object Object ]'를 출력합니다.

이런 문제를 해결하기 위해 Array의 prototype 객체에 toJSONString이라는 메소드를 등록합니다.

그러면 아래와 같은 코드를 통해 모든 객체에서 별도의 함수 선언 없이 바로 접근할 수 있습니다.

Array.prototype.toJSONString = function() { 
	return this.map(v => JSON.stringify(v)).toString()
}

[{ foo: "bar", admin: "test" },  { foo: "bar2", admin: "test" }].toString()
// '[object Object],[object Object]'
[{ foo: "bar", admin: "test" },  { foo: "bar2", admin: "test" }].toJSONString()
// '{"foo":"bar","admin":"test"},{"foo":"bar2","admin":"test"}'

5-2) 객체의 자기자신 참조

객체의 속성값을 설정할 때 자기 자신의 다른 속성값이 필요한 경우가 있습니다.

그럴 때 객체를 함수로 생성하고 this를 return하여 해결할 수 있습니다.

const obj = new function() {
    this.foo = "bar";
    this.abc = "def";
    this.values = this;
    return this;
}

console.log(obj); // { foo: "bar", abc: "def", values: { ... } }

단, 위와 같은 방법으로 생성된 객체는 JSON.stringify 가 불가능합니다.