Prototype이란?
JavaScript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다.
JavaScript는 다른 클래스 기반 객체지향 언어들과는 다른 프로토타입 기반 언어(prototype-based language)입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 프로퍼티를 상속 받을 수도 있고 또, 그 위의 상위 프로토타입 객체도 동일하게 상속 받을 수 있습니다. 이를 프로토타입 체인(prototype chain)이라 말하며 각 객체에 정의된 메소드와 프로퍼티를 한 객체에서 사용할 수 있도록 만들어줍니다.
위의 내용은 프로토타입의 설명입니다.
프로토타입의 설명만으로는 확실히 이해가 되지 않을 수 있기 때문에 아래 예시 코드를 보며 차근차근 이해 해보도록 합시다.
Prototype 객체의 이해와 동작 원리
// 생성자 함수 정의
function diary(year, month, day, content) {
this.year = year;
this.month = month;
this.day = day;
this.content = content;
}
// 인스턴스 생성
var diary = new diary(2022, 09, 17, '오늘은 js 프로토타입에 대해 공부하였다.');위의 예시 코드처럼 작성 후 javascript 콘솔에서 "diary"를 치게 되면 변수 diary의 프로토타입 객체인 diary()에 정의되어 있는 year, month, day, content를 볼 수 있습니다.
또한, toLocaleString, valueOf와 같은 diary()의 프로토타입 객체인 Object에 정의된 다른 메소드나 프로퍼티도 확인이 가능합니다.
이와 같은 객체가 생성되는 이유는 프로토타입 체인이 동작하고 있기 때문입니다.
diary.valueOf()위의 valueOf() 라는 메소드는 호출한 객체의 값을 반환해주는 역할을 합니다.
위의 코드처럼 실행했을 때 자세한 동작원리를 단계별로 나눠 살펴보겠습니다.
- 브라우저가 변수 diary 객체가 valueOf() 메소드를 가지고 있는지 체크합니다.
- 브라우저가 변수 diary 객체 내에서 찾고있는 메소드를 찾지 못했을 때 프로토타입 객체에 valueOf 메소드가 있는지 다시 체크합니다.
- 또 찾지 못한다면 부모로 타고 올라가 diary() 생성자의 프로토타입 객체의 프로토타입 객체(Object() 생성자의 프로토타입)가 valueOf() 메소드를 가지고 있는지 체크합니다.
- valueOf() 메소드를 발견하고 호출하며 동작이 마무리됩니다.
diary.valueOf()를 실행했을 때 위의 순서처럼 동작이 이루어집니다.
여기서 주의할 점은 한 객체의 메소드와 프로퍼티는 다른 객체로 복사되는 것이아닌 프로토타입 체인에 의해 위의 동작처럼 체인을 타고 올라가며 접근하는 것이니 참고 바랍니다.
Prototype Object
함수를 정의하게 되면 Prototype Object도 같이 생성이 됩니다.
또 Prototype Object가 생성되면 constructor와 __proto__도 같이 생성됩니다.
constructor는 내가 선언한 생성자함수를 가리키게 되고, new 키워드와 함께 함수를 호출할 경우 constructor 함수를 실행하고 객체까지 생성됩니다.
여기서 중요한 점은 생성자 함수라고 생각하기 보다는 함수를 생성하는 호출이라고 보는 것이 더 맞습니다.
__proto__는 new를 호출할 때 prototype을 참조하여 자동으로 만들어 집니다.
정리하자면, 생성자 함수에는 prototype이 있고, 생성자로 부터 만들어진 객체에는 __proto__안에 prototype이 들어갑니다.
결국 new를 호출하여 생성된 인스턴스들은 프로토타입 객체들과 내부적으로 [[Prototype]]링크로 연결되며 상호 연결된 객체가 됩니다.
위의 그림을 보면 좀 더 이해가 쉽습니다.
