[FE_Bootcamp] 22일차_프로토타입

~~국가에서 허락한 유일한 스포츠 도박을 프로토라고 하고, 이 프로토들의 종류를 프로토타입이라고 한다.~~

자바스크립트 메서드 공부를 했던 사람이라면, 이 페이지를 들어가본 적이 있을 것이다.

그런데, Array 객체의 filter, map, concat 메서드인 것 까지는 알겠으나,,..,대체 중간에 저 prototype은 무엇인가 궁금했던 사람들이 있을 것이다.

지금부터 prototype에 대해 알아보고, 어떤 곳에 쓰이는 녀석인지 밝혀내도록 하자.

3. 프로토타입

자바스크립트는 객체 지향 언어이지만, 클래스 기반 언어가 아닌 '프로토타입 기반 언어'이다.

오잉? 방금 전까지 클래스니 인스턴스니 떠들어놓고 갑자기 클래스 기반 언어가 아니라니? 하고 벙찔 사람들도 있겠지만,..,.,

먼저 이전에 썼던 ElectricGuitar 클래스의 타입을 알아보자

우리가 class로 선언해 주었던 ElectricGuitar는 클래스가 아니라 함수였던 것이다.

잘 생각해보면, ES5까지는 클래스를 선언할 때 function을 통해 선언해 주었고, ES6부터도 class라는 키워드가 추가된 것이지, class 자체가 추가된 것이 아니었다.

그렇다면, 자바스크립트는 클래스도 없는 주제에 어떻게 상속을 하고, 상위 클래스의 속성을 받아온다는 것일까?

정말 다행히도, 자바스크립트에는 '프로토타입'이라는 것이 있어서 객체간의 상속이 가능하다.

프로토타입은 '원형 객체'를 의미한다. 프로토타입 역시 하나의 객체이며, Dot Notation 등을 이용해 사용할 수 있다.

프로토타입은 생성자 함수(constructor)가 실행될 때 함께 만들어지며, 만약 한 객체가 다른 객체에게 속성이나 메서드를 상속하려 한다면, 상속하려는 속성과 메서드들은 프로토타입 객체에 담기게 된다.

그리고 상속받는 객체는 상위 객체로부터 직접 상속받는 것이 아니라, 프로토타입 객체에서 속성과 메서드를 상속받는 것이다.

쉽게 말해, 프로토타입은 '상속할 속성과 메서드가 담긴 전달용 객체'라고 생각하면 될 것 같다.

이떄 중요한 것은, 메서드는 그대로 전달되지만 속성은 '생성자 함수'에 담긴 채로 전달된다.

엄밀히 말하면, 상속은 메서드(함수)들만 전달한다. 그렇기 때문에 생성자 함수 안에 속성을 넣어 생성자 함수 통째로 전달하는 것이다.

한 클래스가 인스턴스를 만들 때 클래스(부모 객체), 인스턴스(자식 객체), 그리고 프로토타입 객체 총 3개의 객체가 생성된다.

그렇다면, 각 객체끼리는 서로 접근할 수 있을까?

답은 O이다.

부모 객체에서 prototype 메서드를 이용해 프로토타입을 조회하면, 다음과 같은 정보를 얻을 수 있다.

현재 ElectricGuitar 내의 constructor(생성자) 함수와 메서드, 그리고 ElectricGuitar의 부모 객체인 Object의 프로토타입 객체가 ElectricGuitar의 프로토타입 객체 내에 들어있는 것이다.

이때, new ElectricGuitar()로 새로운 객체를 생성하면, 새 객체에는 프로토타입 객체에 들어있는 속성과 메서드들을 가지게 된다.

반대로, 자식 객체에서 부모 객체의 프로토타입을 조회하는데는 __proto__라는 메서드가 쓰인다.

부모 객체는 하나고, 프로토타입 역시 하나이므로 ElectricGuitar.prototype 은 lespaul.__proto__와 같을 수 밖에 없다.

마지막은 프로토타입에서 부모 객체를 조회하는 것이다.

프로토타입은 constructor 함수가 실행되는 동시에 만들어지므로, constructor 메서드를 통해 프로토타입을 생성시킨 객체를 찾을 수 있다.

프로토타입의 생성자이므로, 원래 부모 객체와 동일한 객체를 가리킨다.

오늘은 하루종일 객체 지향 프로그래밍에 대해 공부하였다.

어려운 내용이라 이해하는데 시간도 많이 걸리고, 다른 분들이 쓰신 게시물도 정말 많이 찾아본 것 같다.

내일도 프로토타입 공부를 이어가야 한다,.,..,잊어버리지 않게 아침에 일어나서 잠깐 복습하고 수업에 들어가야겠다!