JavaScript를 잘 활용해야 할 때,
꼭 알아야 할 것이 바로 prototype인데요.
오늘은 prototype을 어떻게 사용하는지에 대해서 정리해 보겠습니다.
1. protoType
Java에서는 Class를 이용해 상속을 할 수 있는 반면,
JavaScript에서는 prototype을 통해서 상속을 제공합니다.
(참고로, ES6에서는 Class개념을 사용할 수 있도록 되었네요.)
protoType에 대한 설명보다 코드를 먼저 보는 것이 좋을 것 같은데요.
먼저, 아래 이미지와 같이 함수를 정의해 놓습니다.
첫줄에 나오는 Ancestor라고 하는 함수는,
화살표가 가르키고 있는, Child라고 하는 함수가 정의된 후에,
new를 붙여서 호출됨으로써,
객체를 생성해서 반환해주는, 생성자역할을 하였습니다.
그런데, let tester = {}; 과 같은 방식으로 생성하지 않고,
Ancestor나 Child같이 함수를 정의해서 생성한 이유가 무엇일까요?
객체를 생성할 때, 메소드나 Property를 가지고 있게하기 위해서 입니다.
어떤 객체가 생성될 때, 메소드나 Property를 가지고 있는 객체의 원형이 저장된 곳이 존재하는데요.
그 저장된 곳이 prototype이라고 하는 property입니다.
(우연이 아니고, prototype의 한글 뜻도 원형이라는 뜻입니다.)
다시 정리하면,
모든 객체에는 객체의 메소드나 Property값을 가지고 있는,
객체의 원형이 저장된 prototype이라는 Property가 존재한다는 것입니다.
따라서, Ancestor 함수의 원형을 가지고 있는 prototype프로퍼티에
test1 = true라는 값을 정의해서,
객체가 생성될 때 가지고 생성되도록 하였구요.
Child객체는 prototype에 Ancestor객체를 넣어놓았습니다.
위에서 생성한 객체를 console.log로 보면, 다음과 같이 true값이 나옵니다.
이것은, Child 생성자의 객체인 tester의 prototype이 Ancestor 생성자의 객체를 가지고 있기 때문입니다.
상속이라는 개념으로 뭉뚱거릴수도 있겠지만,
실제로는 prototype이라는 Javascript고유의 개념에 의한 prototype chain이라고 하는 것입니다.
