자바스크립트는 prototype을 베이스로 한 언어라고 하는데요.
ES2015에서 class라는 단어가 나오기 시작하였지만,
여전히 Javascript는 prototype베이스의 언어입니다.
오늘은 이러한 JS의 prototype에 대해서 알아보겠습니다.

 

1. prototype

JavaScript의 모든 객체는 private property를 가지고 있는데요.
이 property는 prototype 객체에 대한 link를 가지고 있습니다.
그리고 그 prototype객체는 또한 그 자신의 prototype을가지고 있지요.

 

마치 러시아 인형 마트로시카처럼,

각 객체의 private property의 prototype 링크를 쭈욱 타고 올라갈 수 있습니다.
이런식으로 prototype링크를 따라가다가, 결국 prototype이 null이 될 때가지 계속 올라가게 되는데요.
null은 prototype을 가지고 있지 않고 있어서, prototype의 final link이기도 합니다.

 

 

JS에서는 객체의 property에 액세스하면,

해당 객체 뿐만아니라, 그의 생성자 함수의 prototype까지 액세스 하게 되는데요.

거기서도 원하는 property를 찾지 못하면, protytype의 링크를 타고 계속 올라가서 찾습니다.

상속구조가 형성되어 있는 것 인데요.

이것에 대해서 알고 있어야, 왜 prototype을 상속에 사용하는지를 이해할 수 있습니다.

 

거의 모든 Javascript의 객체는 Object 타입의 객체인데요.

따라서, Object는 prototype링크의 가장 정점에 존재하고 있습니다.

결국에는 링크체인을 따라가다, 가장 상위에 있는 Object와 만나게 되겠지요.

이 뜻은 모든 객체가 Object의 property들을 이용할 수 있다는 말이 됩니다.

 

코드를 보도록 하겠습니다.

만약 아래와 같이 testous라고 하는 생성자 함수를 만든 다음,

객체를 보면 아래 이미지와 같은 정보를 볼 수 있는데요.

 

x와 y값은 생성자 함수에서 만든 것이고,

__proto__가 보이실 텐데요. 이것이 바로 prototype에 접근할 수 있는 property입니다.

위에서 말한대로, Object가 바로 prototype링크 체인에서의 정점에 존재하고 있습니다.

 

 

 

그럼, prototype을 이용한 상속과 실제 코드를 보면서 좀 더 이해해 보겠습니다.

 

2. prototype과 상속

2-1. 상속 part1

prototype과 상속에 대해서 좀 더 알아보도록 하겠습니다.

ProtoTester()라는 함수에,

VSCode나 Webstorm같은 IDE의 도움을 받아서,

"."을 찍고 함수에서 접근할 수 있는 property를 보면 아래와 같이 prototype이 있다는 것을 볼 수 있습니다.

 

 

그럼 이 prototype을 이용해서 상속이라는 것을 구현해 보겠습니다.

원래 객체의 점수에 10점을 더해서 return해주는 함수를,

prototype에 접근해서 넣어줍니다.

아래 결과로 console에 찍히는 값은 90점입니다.

 

 

 

t2를 새롭게 만들어도 똑같은 함수를 실행시켜서, 10점이 올라간 90점과 70점의 결과값을 얻을 수 있습니다.

higherScore만 다르게 정의한다면, t1, t2 두객체의 값도 달라지게 될 것이구요.

ProtoTester에 직접 정의하지 않았으므로, 객체 생성시마다 불필요하게 매번 실행되거나 저장되지도 않습니다.

 

 

다른 언어의 상속에서 그랫던 것처럼,

아래와 같이 해당 객체에 대해서만 다르게 정의해서 사용할 수도 있습니다.

이제 김군과 박군은 모두 90점이 나오게 됩니다.

 

 

 

다시 한번 정리해 보면, JS에서는 객체에서 해당 Property를 가지고 있는지를 먼저 보구요.

없다면, prototype link를 타고 올라가서, prototype에 해당 속성이 있는지 보게 됩니다.

t2의 경우, 객체에 새롭게 higherScore라는 Property를 정의했으므로, prototype으로 찾아올라가지 않고,

자신에게 정의된 것을 사용하여서 +30점을 하여, 90점이 된 것이지요.

 

보통 함수의 경우, prototype에 정의해서 사용하는 경우가 많습니다.

 

2-2. 상속 part2

이번에도 상속에 대해서 볼 텐데요.

ProtoTestChild의 prototype에 ProtoTest에 "new ProtoTest()"를 넣어줌으로써,

ProtoTest와 ProtoTestChild간의 상속관계가 형성되는 것 입니다.

그래서, ProtoTestChild의 객체인 mChild가 ProtoTest객체의 higherScore의 Property에 접근할 수 있었던 것 입니다.

 

 

 

이번에는 상속의 상속관계를 보도록 하겠습니다.

Fun은 ParentFun을 상속받고, ParentFun은 GrandParentFun을 상속받습니다.

그래서, Fun이 정의한 적 없는 score Property에 접근할 수 있는 것 이지요.

 

 

결과값에 88이 정상적으로 찍히는 것을 볼 수 있습니다.

 

 

객체들의 정점에 있는 Object의 prototype까지 link가 되어있으므로,

Object에 도달할때까지 prototype link를 따라가게 되어있는데요.

그렇기 때문에 아래의 t1에서 정의한 적이 없는,

hasOwnProperty와 같은 Property들에도 접근할 수 있는 것 입니다.

 

 

3. prototype 실제 사례들

실제 코드에서의 사례들도 보도록 하겠습니다.

아래는 구글에서 공개한 샘플코드인데요.

FriendlyEats함수를 정의하고, getCleanPath같은 함수들은 prototype에 정의하였습니다.

javascript의 효율적인 방식인 것이지요.

 

 

이상으로 prototype에 대해서 정리해 보았습니다.

업데이트 할 내용이 있거나, 좀 더 좋은 방식이 있다면 이 글을 통해 업데이트 하도록 하겠습니다.

 

728x90

+ Recent posts