prototype

자바스크립트의 객체지향을 지탱하고 있는 핵심 개념

자바스크립트를 일반적인 객체지향 언어와 구분하는 개념

프로토타입을 통해 상속이라는 개념을 제공

예제 1)

user 객체를 하나 만들고
user.name을 하면 이름이 나옵니다.

hasOwnProperty는 자신이 가진 프로퍼티를 확인하는 메서드
user 객체에 해당 프로퍼티가 있으면 true, 없으면 false

그러면 hasOwnProperty는 생성한 적이 없는데 어디서 나온 녀석인가??

[[Prototype]]이라는 객체가 바로 프로토타입

객체에서 프로퍼티를 읽으려 하는데 없으면 이곳에서 찾게된다.

만약 hasOwnProperty가 객체 안에 있으면
방금 생성한 메서드로 동작하게된다.

위의 코드처럼 객체에 프로퍼티가 있으면 탐색을 멈추게 된다.

결과적으로 객체 내에 프로퍼티가 없을 때만 프로토타입에서 프로퍼티를 찾는다.

---

프로토타입의 동작원리 - 상속

예제 2)

• 공통 : 바퀴 수, 드라이브 메서드
• BMW : 네비게이션
  

지금은 차가 3대 그러나 차들이 늘어날 때마다 새로운 변수를 선언할 것인가??

• car 라는 상위 객체를 생성하여 공통된 부분을 만들어주고
  bmw, benz, audi객체의 wheels와 drive()를 삭제
• car가 bmw, benz, audi의 프로토타입
• bmw, benz, audi들은 car의 상속을 받음

모든 객체는 __proto__를 통해 자신의 프로토타입([[Prototype]] 내부 슬롯)에 접근할 수 있다.

bmw에서 wheels를 찾으면 먼저 bmw객체 내부에서 찾고
없으면 프로토타입에서 확인
프로토타입을 열어보면
drive()와 wheels 프로퍼티가 있다.

---

프로토타입 체이닝

예제 3)

상속은 계속 이어진다!!!

이번에는 bmw를 상속받는 x5객체를 생성

여기서 x5의 color와 name은 객체 내에 있어서 값을 주고 탐색을 멈춘다.

그리고 navigation을 해도 값이 잘 나온다.

• x5에서 navigation을 찾는데 없으면 프로토타입인 bmw에서 탐색하여 찾고 멈춘다.

• 만약 x5에서 drive()를 찾을려면, x5에 없어서 프로토타입인 bmw로 올라간다.
  그런데도 없어서 bmw의 프로토타입인 car까지 올라가서 찾고 멈춘다.

이를 프로토타입 체인이라고 한다!!

감사합니다 🤯

---

유투버 '코딩앙마' 님의 영상을 참고하여 공부하기 위해 포스팅하였습니다.