프로토타입

프로토타입이란?

JavaScript는 프로토타입 기반 언어라고 한다

 

JavaScript를 처음 만든 개발자는 다른 언어들에 존재하는 class 개념을 만들지 않고

class와 비슷하게 동작하는 프로토타입 개념으로 객체지향적 언어를 만들었다

 

프로토타입은 객체를 참조 하여 새로운 객체를 생성하는 방식으로 동작하는데

 

프로토타입에는 Prototype Object와 Prototype Link가 존재한다

이 둘을 통틀어 프로토타입 이라고 한다

 

* ES6 버전부터 JavaScript는 class를 지원하지만 껍데기만 class지 내부적으로 prototype이다

 

Prototype의 생성 과정

함수를 정의하는 시점에는 2가지의 작업이 내부적으로 수행이 되는데

 

1.Prototype Object 생성 생성

함수를 정의하면 함수와 Prototype Object가 함께 생성이 된다

 

그리고 prototype 속성은 해당 Prototype Object를 참조하게 된다

2.Constructor(생성자) 함수 참조 

생성된 Prototype Object 의 생성자 함수는 정의된 함수를 참조하게 된다

 

 

중요한 점

prototype 속성은 함수만 존재하게 되고 인스턴스(해당 함수로 생성된 객체)는 prototype 속성이 없다

사진을 보면 인스턴스에 [[Prototype]] 이라는 속성이 존재하는데

이건 __proto__ 속성을 뜻한다 헷갈리지 말자 

 

 

Prototype Link

Prototype Link는 JS에서 객체와 그 객체의 prototype 간의 연결을 의미하는 개념이다

 

예시 코드를 보자

Person 함수로 생성된 인스턴스는 아무런 메서드가 존재하지 않지만

sayHi라는 메서드가 정상적으로 호출이 된다

 

이런게 가능한 이유는 __proto__(또는 [[Prototype]]) 속성 때문에 가능한것

__proto__는 생성된 모든 객체가 가지고 있는 속성으로

인스턴스가 생성될때 호출했던 함수의 Prototype Object를 참조한다

 

그래서 해당 코드의 동작 순서를 보면

1. sayHi() 함수 호출
2. 자신이 해당 메서드가 존재하는지 탐색
3. 없으면 __proto__ 속성을 통해서 참조하는 Prototype Object에서 탐색
4. sayHi 함수가 존재하므로 호출

이러한 방식으로 거슬러 올라가면서 메서드를 찾고 마지막 부모 객체에도

존재하지 않는다면 undefined를 반환한다

 

이렇게 이어지는 연결 고리를 프로토타입 체인 이라고 한다

 

 

정리해보면

Prototype Link - 객체와 그 객체의 프로토타입 간의 직접적인 연결

prototype Chain - 프로토타입 링크를 따라 이어지는 일련의 연결

 

 

프로토타입을 쓰는 이유

1.메모리 효율성

프로토타입을 활용해서 메모리를 효율적으로 사용할 수 있다

위의 코드처럼 생성된 인스턴스들은 width와 hight 값이 서로 다른 메모리 공간을 차지한다

그러므로 인스턴스들이 수없이 많아지면 중복된 데이터가 쌓이게 되는것

 

이때 프로토타입으로 메모리 효율성을 높힐수 있다

2.코드 관리

유지보수와 코드 관리에 유용하다.

만약 인스턴스가 수없이 많이 있는데 width와 hight 값을 변경해야 한다면?

prototype을 사용하지 않은 경우에는 인스턴스들을 일일이 값을 변경해줘야 한다

 

그래서 prototype을 사용해서 내부 속성만 변경해줘서 유지보수와 코드 관리에 용이하다

 

 

참고한 자료

https://www.youtube.com/watch?v=GmmZwOSpk0g

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-Prototype-%EC%99%84%EC%A0%84-%EC%A0%95%EB%B3%B5-%E2%9D%97

[JS] 📚 프로토타입(Prototype) 개념 완전 정복 ❗