프로토타입(Prototype) - JavaScript

JavaScript

프로토타입(Prototype) JavaScript

---

프로토타입(Prototype)이란

• 새로운 객체를 만들어 낼 때 부모 객체 안에 사용 가능한 빈 객체가 존재하는데 이를 prototype이라고 한다. 아래 그림과 같이 정의하지 않은 Object가 존재하는 모습을 볼 수 있다.

왜 그런가요?

• JS는 객체지향언어이다. JS에는 클래스(Class)라는 개념이 존재하지 않았다( ECMA6 표준에서는 Class 문법이 추가되었지만 문법이 추가된 것이고 클래스 기반으로 바뀐 것은 아니다) 하지만 JS에서는 함수와 new를 통해 새로운 객체를 만들 수 있는데 여기서 부모 객체 안에 prototype이라는 빈 객체가 존재하고 사용 가능하다는 점과 상속이라는 특성에 주목해야 한다

프로토타입의 특성

• 부모 객체에만 가지고 있지만 자식 객체에서도 사용이 가능하다. ( 객체 안에 찾고자 하는 내용이 없다면 부모 객체까지 접근하여 찾음)
• 아래와 같이 자식 객체에 따로 함수를 지정하지 않았지만 hi를 출력한다.

가지고 있지않은 부모객체의 함수를 사용하는 모습

결론

프로토타입을 통해 우리는 array를 다루는 sort, length와 같은 함수가 어떻게 동작하는 것인지 이해할 수 있다. 아래와 같이 나는 부모 객체에 valueOf라는 함수를 지정해 준 적이 없지만 콘솔에는 객체라는 value와 값들을 표시해준다. 즉 우리가 사용하는 내장 함수들은 프로토타입의 형태로 숨겨져 있다는 점을 배울 수 있다.

 

정의하지 않은 valueOf 함수를 사용하는 모습

---

이제 MDN 사이트에 뭔가를 검색했을 때 왜 아래와 같이 설명되는지도 이해를 할 수 있다.😁

MDN에서 sort를 검색했을 때