[번역] 자바스크립트에서 prototype과 __proto__의 차이점은 무엇인가?

[sbyeol3]

원문 : https://javascript.plainenglish.io/proto-vs-prototype-in-js-140b9b9c8cd5
부제 : An explanation of the relationship between the two concepts.

prototype에 대한 설명

애플은 최근에 새로운 아이폰 모델인 iPhone 11을 출시했습니다. 그 모델은 특정한 기능을 가지는데 예를 들어 Face ID와 4K 비디오같은 것들이죠. 모든 아이폰 11은 동일한 기능들을 가지고 있습니다. 그렇다면, 새로운 아이폰 11이 호출될 때마다 아이폰11을 만드는 생성자 함수가 있다고 가정해봅시다. 적절하게 아이폰 11을 만들기 위해 모델을 참고하는 _prototype_이 필요합니다. 이 프로토타입 또는 모델은 모든 아이폰이 Face ID를 가지며 4K 비디오를 찍을 수 있도록 보장합니다. 따라서 아이폰 생성자는 반드시 제작해야 하는 프로토타입을 알고 접근해야 합니다. 이것이 생성자의 prototype 프로퍼티입니다.

function iPhone() {}; // 생성자

// a method for recognizing faces
iPhone.prototype.faceID = function() { ... };

// a method for taking 4k video
iPhone.prototype.video = function() { ... };

let newPhone = new iPhone(); // 아이폰11

여기까지 이해가 되셨나요? 그럼 __proto__에 대해 알아봅시다.

__proto__와 prototype의 관계

새로운 iPhone 11을 만들고 newPhone이라는 변수에 저장했습니다. newPhone의 내용물은 아래와 같을 겁니다.

이 아이폰11은 FaceID와 video 기능이 있는 것 같습니다! 사실 여러분은 newPhone.faceID()나 newPhone.video()를 실행할 수 있고 이 메소드들이 잘 동작하는 걸 볼 수 있습니다. 그러나 이런 함수들이 __proto__라는 객체에 저장되고 직접적으로 newPhone의 프로퍼티로 저장되지 않는 것일까요?

__proto__는 생성된 프로토타입을 가리키는 모든 클래스 _인스턴스_의 객체입니다. newPhone.__proto__는 iPhone.prototype에 대한 참조이고 따라서 정확히 동일한 것들을 지니고 있습니다. iPhone.prototype과 동일한 proto 프로퍼티를 가짐으로써, newPhone은 본질적으로 "보세요, 저는 아이폰11이라서 다른 아이폰11과 동일한 기능을 가지고 있어요! 페이스 아이디, 4K 화질 등 뭐든요." 라고 말하는 것과 같죠.

현실세계에서 prototype과 __proto__의 유일한 진짜 차이점은 전자는 클래스 생성자의 프로퍼티라는 점이고 후자는 클래스 인스턴스의 프로퍼티라는 점입니다. 다른 말로 말하면 iPhone.prototype은 iPhone을 만드는 청사진을 제공하며, newPhone.__proto__는 그 청사진에 따라 인스턴스가 만들어졌다는 것을 말해줍니다. 두 객체에 존재하는 프로퍼티들과 메소드에 대해서는... 음 정확히 같습니다.

마지막으로, 여러분은 위 이미지의 마지막 라인에 있는 proto: Object의 뜻에 대해 궁금하셨을 겁니다. newPhone.__proto__는 사실 자바스크립트 객체이기 때문에 자바스크립트 객체들 또한 특정한 "청사진"으로부터 만들어진 것입니다. 이 예시에서 newPhone.__proto__.__proto__는 Object.prototype을 나타냅니다. 이는 모든 자바스크립트 객체가 기반으로 하는 프로토타입이죠. 그게 다입니다!