[JavaScript] Prototype 이해하기

자바스크립트는 프로토타입 기반의 언어라고 불립니다. 자바스크립트의 모든것이 프로토타입으로 이루어져있기 때문에 이 프로토타입을 이해하고 있는것과 없는것의 차이는 엄청납니다. 하지만 개념자체가 많이 어렵고 복잡합니다.
이 글에서는 제가 이해한 프로토타입의 개념을 설명하면서 다시 한번 저 스스로도 정리해보겠습니다.

Class와 Prototype

클래스(Class)는 객체지향언어에서 빠질수 없는 개념입니다. Java나 Python 등 여러 객체지향언어에서 사용되고있는 개념입니다. 자바스크립트도 객체지향언어이지만 다른 언어와는 다르게 프로토타입 기반 객체지향프로그래밍언어입니다. 따라서 자바스크립트의 동작원리를 알기 위해서는 프로토타입의 개념을 알고있어야합니다.
먼저 Class에서 배웠던 개념은 다 잊어버리시기 바랍니다. 객체안에 가지고있는 속성 등 여러가지 개념을 머릿속에 넣고 프로토타입을 이해하다보면 '어? 내가 아는 객체는 이렇게 작동해야 하는데?' 라고 생각이 들면서 더 헷가리게 됩니다. 참고로 ECMA6 표준에서는 Class문법이 추가되었지만 기본적으로 프로토타입기반입니다.

프로토타입 객체 생성하기

먼저 자바스크립트에서 가장 중요하게 생각해야할 개념은 함수도 객체다 입니다. Class기반에서는 함수는 그저 객체의 속성중 하나로 존재하고 함수 홀로는 존재할수 없었습닏. 하지만 자바스크립트는 함수도 객체입니다. 함수 선언을 하면 함수객체라는 것이 생성되는 것이죠. 그럼 함수를 생성해 봅시다

function example(){
    console.log('This is example');
}

example();

위 대로 코딩을 하면 example()함수 객체가 생성되게 됩니다. 그럼 example()객체의 속성들을 살펴볼까요?

뭐가 많죠?? 우리가 지금당장 봐야할것은 prototype과 __proto__ 입니다.
example이라는 함수를 선언했을 뿐인데(심지어 new연산자도 사용하지 않았습니다.) 함수객체가 생성되고 그 안에 프로퍼티(속성)들이 들어있다는 것을 알수 있었습니다. 자바스크립트 엔진에서 함수를 선언하면서 함수 객체를 생성해 준것이죠.
prototype과 __proto__ 는 둘다 프로퍼티 입니다. 이 두 프로퍼티 옆에 무언가 쓰여져 있는데 {constructor: f}, f() 가 써져있죠. 두 프로퍼티가 가리기키는 객체입니다. 그런데 지금 여기서는 __proto__ 는 신경쓰지 않아도 됩니다. 먼저 prototype 먼저 볼까요?

으엥? prototype 안에 constructor와 __proto__가 다시 나왔습니다. 근데 constructor 가 가리키는 객체를 보면 어디서 많이 본 이름이 적혀있습니다. 바로 우리가 위에서 선언한 example() 객체입니다. __proto__는 Object 최 상위 객체를 가리키고 있습니다. 구조가 그려지시나요? 그림으로 한번 그려보세요.

function example(){}을 선언함과 동시에 위에 함수객채 와 함수프로토타입객체 가 생성되었습니다. 자바스크립트엔지이 자동을 생성을 해준것이죠. 모든 함수는 선언과 동시에 위와 같은 구조로 객체들이 생성되게 됩니다. 서로가 서로를 참조하는 구조를 가지게 됩니다. 어느정도 머릿속에 그려지시나요?
하지만 보통 함수객체를 선언하고 따로 변수에 담아서 생성을 하게 되죠. 그렇게 되면 구조가 어떻게 될까요? 변수를 생성해봅시다.

ex 변수의 속성들을 살펴보면 __proto__가 prototype 객체를 가리키고 있다는 것을 볼수있습니다. 그 하위 속성을 살펴보면 위에서 생성했던 함수 객체 example()을 참조하고 있는것을 알 수 있습니다. 구조로 그려볼까요?

저희가 새로 생성한 변수 let ex = new example() 이 함수를 선언할때 생성된 프로토타입 객체를 가리키고 있다는 것을 알수 있었습니다.

위에서 본 것처럼 함수를 선언 생성되는것

• 함수객체
• 함수프로토타입객체
  가 생성되고 함수 생성자로 변수를 만들면 변수는 자신을 생성한 함수의 함수프로토타입객체를 참조할수 있는 __proto__를 가지고 있다는 것을 알 수 있습니다. example() 생성자 함수로 생성한 모든 변수들은 다 example prototype object를 가리키게 됩니다. 그럼 프로토타입 객체안에 프로퍼티를 넣게되면 모든 변수들이 다 참조를 할수 있겠죠? 이러한 특징을 통해서 메모리 참조도 줄일수 있게 됩니다.

제가 쓴 글은 프로토타입 구조에 대해서 간단한 이해를 위한 분들에게 도움이 될것 같고, 좀더 자세한 설명과 개념을 원하시는 분들은

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

[Javascript ] 프로토타입 이해하기

https://poiemaweb.com/js-prototype

 

를 참조했으니 한번 살펴보시길 바랍니다. 감사합니다.