JS_기본 문법 (34)_ prototype (특징 및 constructor와의 차이)

JS의 prototype에 대해서 알아보자.

 

0. 상속(inheritance)

객체지향의 개념 중 하나인 상속은 간단히 표현하면 부모 객체의 속성을 자식 객체가 물려받는 것을 말한다.

JS에서 이것을 구현하기 위한 방법이 몇가지 있는데

 

첫번째는 저번시간에 다루었던 constructor 문법이다.

2023.08.08 - [🌌 | WEB DEV/Vanilla JS] - JS_기본 문법 (33)_ constructor 문법

 

그리고 두번째 방법이 prototype이다.

 

 

1. prototype

모든 생성자 함수들은 prototype을 내장하고 있다. 

function Student(name, code){
  this.name = name;
  this.code = code;
}

console.log(Student.prototype);

 

 

prototype의 기능

prototype은 부모가 자식에게 줄 정보를 담고 있다. 비유하자면 유전자라고 할 수 있다.

이를 이용하면 상속을 구현할 수 있는데

 

부모.prototype에 등록된 변수, 함수 등은

부모로 부터 만들어진 새로운 자식 object가 전부 사용할 수 있다.

 

이때 특징은 prototype에는 여러 값을 등록할 수 있고, 함수도 마찬가지로 가능하다.

또한, 이것에 추가된 데이터는 '부모'만이 가지고 있는다.

 

 

예시

function Student(name, code){
  this.name = name;
  this.code = code;
}

Student.prototype.class = 1;

let student1 = new Student();
console.log(student1.class);

--------
1

 

이처럼 prototype에 추가한 데이터를 새로운 자식 객체에서 사용할 수 있다.

 

 

prototype 작동원리

위에서 본 예시처럼 새로운 자식 객체는 부모.prototype에 저장된 데이터에 접근할 수 있다.

이것의 작동원리를 알아보면

 

JS의 엔진이 Object의 값을 출력할 때 

1) 현 객체가 해당 속성을 가지고 있는가?

2) 부모 객체가 해당 속성을 가지고 있는가?

3) 부모의 부모 객체가 해당 속성을 가지고 있는가?

4) ...

 

이처럼 거슬러 올라가며 값을 찾아낸다.

그렇기때문에 자식 객체가 값을 직접 갖고 있지 않아도 부모의 prototype에 존재하는 값을 반환할 수 있는 것이다.

 

 

그럼 혹시 메소드는??

새로운 array를 만들었을 때 JS에 내장되어있는 forEach(), sort(), toString() 등의 메소드는 과연 어떻게 사용할 수 있던 것일까?

 

let arr1 = [1,2,3];

let arr1 = new Array(1,2,3);

 

위의 두 코드는 완벽하게 같은 것을 의미한다.

대괄호에 원소를 넣는 것은 내부적으로 new Array()를 통해 새로운 array 객체를 만들어낸다.

 

즉, Array() 라는 constructor 함수를 이용하여 자식 array를 만드는 것이다.

 

따라서 Array.prototype에 등록되어있는 함수들을 새롭게 만든 array 들이 사용할 수 있다.

그것들이 바로 forEach(), sort(), toString()와 같은 메소드인 것이다.

 

 

 

3. constructor 와 prototype의 차이

마지막으로 이 둘의 차이에 대해서 알아보면

 

constructor는 자식에게도 데이터가 전해진다.

prototype은 부모만이 데이터를 가진다.

 

이 특징을 이용하여 상황에 맞게 활용하면 된다!