[JS] 프로토타입 (Prototype)

자바스크립트를 사용하며 객체지향임에도 불구하고 Java와 같은 언어와는 다르다는 느낌을 받습니다. 그 이유는 클래스 기반 객체지향 프로그래밍 언어가 아닌 프로토타입 기반 객체지향프로그래밍 언어이기 때문입니다.

처음 봤는데?

처음 봤다고 생각할 수 있습니다. 하지만 평소에 자주 봤을 확률이 높습니다

 

 

이렇게 객체를 만든 후console.dir을 통해 확인해 보면 __proto__라는 요소가 있는 것을 볼 수 있습니다. 위와 같은 것들이 모두 프로토타입과 관련된 내용입니다.

프로토타입 체인 (Prototype Chain)

먼저 프로토타입을 이해하기 위해선 어떻게 이용되는지 알아야합니다.

위의 예제에서 person이라는 객체는 hasOwnProperty라는 함수를 정의하지 않았습니다. 하지만 정상적으로 작동한다는 것을 알 수 있습니다.

그 이유는 무엇일까요?

비슷하지만 조금은 다른 예제입니다. 생성자 함수를 통해 Child객체를 만들어주었습니다. Child에는 name이라는 요소가 없지만 마찬가지로 정상적으로 찍혔습니다.

 

그렇다면 Child.prototype = new Parent()는 무엇이고 왜 이런것들이 가능할까요?

바로 프로토타입 체인으로 가능합니다.

 

 

위의 이미지를 보면 person의 __proto__에 hasOwnProperty라는 메서드가 있습니다.

 

위의 첫번째 예제와 그림을 보면 알 수 있듯 찾는 요소가 현재 객체에 없다면 자신의 프로토타입에서 찾고 프로토타입의 프로토타입에서 찾는 방식입니다.

 

이런 방식을 프로토타입 체인이라고 합니다.

프로토타입 객체

위에서 프로토타입에 대해 직접적으로 본것은 __proto__라는 것 밖에 없습니다.

 

처음에 개인적으로 프로토타입에 대해 잘 이해가 가지 않았습니다. 그래서 나름대로 그림을 그려서 이해해보려고 노력해보았습니다.

 

아래 그림은 100% 정확한 그림이 아닌 이해하기 위한 자료입니다.

위의 그림을 이해하기 위해선 자바스크립트에선 함수도 객체라는 것을 알아야합니다. 위의 Parent와 Child는 각각 객체를 의미합니다.

 

간단히 설명을 하고 코드 예제로 알아보겠습니다. Parent에 해당되는 내용은 쉽게 이해하기 위해 생성자 함수라고 생각하면 됩니다. 생성자 함수에서 생성된 객체는 Child입니다.

그렇다면 Child의 [[Prototype]]은 Parent.prototype입니다.

 

[[Prototype]]이란 해당 객체의 프로토타입 객체를 자식 시점에서 바라본 것입니다. __proto__프로퍼티를 통해 엑세스할 수 있습니다.

해당 예제를 바라본다면 Person 생성자 함수 또한 객체이고, new Person()을 통해 생성된 person도 객체입니다.

 

Person은 이전의 예제에서의 Parent가 되며 person은 Child가 됩니다.

 

이렇게 된다면 person.__proto__ === Person.prototype은 참입니다.

Child.prototype = new Parent() 가 뭐였을까?

 

아까의 예제를 다시 확인해보겠습니다.

 

Child.prototype 즉, child.__proto__에 new Person()을 통해 생성된 객체를 할당합니다.

그렇다면 child.name을 접근했을때 해당 객체에 없기에 child.__proto__인 new Person()의 객체에서 name을 탐색하게 됩니다.

 

 

아직 프로토타입에 대해 미숙하기에 수정할 내용은 댓글을 통해 알려주세요