Dev/JavaScript

[JavaScript] ProtoType (2)

隣席の開発者群 2023. 7. 13. 16:57
반응형

저번에 정리하다가 만 ProtoType에 대한 정리를 오늘 마칠 셈인데, 아무래도 분량이 꽤나 되다보니 어느정도 축약을 할 내용이다. 사실상 대부분의 내용이 논리적으로 당연한 내용들이라고 볼 수 있기 때문에, 꼭 필요하다 싶은 개념정도만 정리해두고 나중에 필요하면 내용을 추가하는 방식이 될 것 같다. 

 

ProtoType Chain

앞선 ProtoType(1) 게시물의 링크를 걸어두겠다.

2023.07.05 - [Dev/JavaScript] - [JavaScript] ProtoType (1)

 

[JavaScript] ProtoType (1)

대망의 ProtoType이다. 대부분 학원 출신 개발자들은 Java를 통해 개발에 입문을 하는 케이스가 많다보니, 아무래도 Class 기반의 객체를 익숙하게 여길텐데, 놀랍게도 이 방식대로 자바스크립트에

openotadev.tistory.com

이 글에서 설명했듯 모든 객체는 상위 프로토타입 객체를 상속하고 있다고 볼 수 있는데, 그걸 객체의  [[prototype]]속성을 통해 확인이 가능하다. 또한, prototype이라는 속성의 경우 생성자로 사용되는 함수가 가지고 있게 되는데, 이 함수를 통해 생성되는 객체의 부모 프로토타입 객체를 담고 있다. 

그러면 과연 ProtoType Chain이란 어떤 내용을 말하는 걸까? 

일반적으로 ProtoType Chain은 내가 특정 객체에 없는 Property를 호출했을 때 발생한다. 이러면 JavaScript가 알아서 [[prototype]] 속성을 뒤져가며 호출한 Property를 찾아오려고 하는데, 이런 이유로 그냥 객체를 하나 만들고 hasOwnProperty()라는 메서드를 호출하면 Object.hasOwnProperty()를 가져오게 되는거다. 

 

여기서 당연한 이야기지만 한가지 알 수 있는 것은 JavaScript 코드 내에서 Object 타입으로 선언이 되어있는 모든 객체들은 ProtoType Chain의 끝에 Object.prototype이 존재하게 된다. 때문에 Object.prototype은 "ProtoType Chain의 종점" 이라고 불린다. 

 

우리는 이런 ProtoType Chain 을 활용해서 상당히 많은 행위를 할 수 있는데, 어찌 됐든 ProtoType 객체도 마찬가지로 객체이기 때문에 Property를 자유롭게 변경가능하고, 이 변경 행위는 바로 ProtoType Chain에 반영되기 때문에, 굳이 모든 객체를 찾아다니며 Property를 추가해줄 필요가 없게 되는 것이다.

당연히 [[Prototype]]에 들어있는 ProtoType 객체를 변경할 수도 있고, 이를 통해 다른 객체를 상속하도록 할 수도 있다.

 

이는 원시타입의 경우에도 마찬가지인데, "ㅇ? 원시타입이 어캐 그게 돼? 객체가 아니라서 prototype이라는 Property를 가질 수가 없잖아?" 라는 반응을 하겠지만, 놀랍게도 가능하다. 이는 Wrapper Object의 도움으로 가능하게 되는데 뭐 크게 설명할게 없지만 다른 게시물로 한번 작성해보도록 하겠다. 

 

LIST

'Dev > JavaScript' 카테고리의 다른 글

[JavaScript] iterable / iterator  (0) 2023.07.17
[JavaScript] Wrapper Object  (0) 2023.07.13
[JavaScript] ProtoType (1)  (0) 2023.07.05
[JavaScript] this  (0) 2023.06.29
[JavaScript] 생성자 함수  (0) 2023.06.29