프로토타입 상속의 동작 방식에 대해 설명해주세요.

프로토타입이 뭐야? 🤔

프로토타입은 자바스크립트에서 "유전자" 같은 역할을 해요! 🧬

부모가 자식에게 특징을 물려주듯이, 자바스크립트 객체들도 다른 객체로부터 속성과 메서드를 "상속"받을 수 있어요.

일상 예시로 설명하면

• 스마트폰 📱 (기본 기능: 전화, 문자)
• 아이폰 📱 (스마트폰 기능 + 페이스타임, 시리)
• 갤럭시 📱 (스마트폰 기능 + 삼성페이, 빅스비)

아이폰과 갤럭시 모두 "스마트폰"의 기본 기능을 물려받고, 각자만의 추가 기능을 가지고 있죠!

프로토타입 체인의 동작 원리 🔗

자바스크립트에서 객체의 속성을 찾을 때는 마치 "집 열쇠 찾기" 와 같아요! 🔑

1. 내 주머니에서 먼저 찾아봄 👖
2. 없으면 가방에서 찾아봄 🎒
3. 그래도 없으면 차 안에서 찾아봄 🚗
4. 마지막으로 집 안에서 찾아봄 🏠
5. 그래도 없으면 "없다!" 고 포기 😵

const 동물 = { 숨쉬기: () => console.log('후~하~') };
const 강아지 = Object.create(동물);
강아지.짖기 = () => console.log('멍멍!');

const 마루 = Object.create(강아지);
마루.이름 = '마루';

// 마루.숨쉬기() 호출 시:
// 1. 마루에서 숨쉬기 찾기 → 없음
// 2. 강아지에서 숨쉬기 찾기 → 없음  
// 3. 동물에서 숨쉬기 찾기 → 있음! 실행 ✅

React/Next.js에서 왜 중요할까? ⚛️

React 컴포넌트도 사실 프로토타입 상속을 활용해요!

class MyComponent extends React.Component {
  // React.Component의 메서드들을 상속받음
  // render(), setState(), componentDidMount() 등
}

알아두면 좋은 꿀팁들 🍯

1. proto vs prototype 차이점

• __proto__: 실제 프로토타입 체인 링크 🔗
• prototype: 함수의 프로토타입 설정용 프로퍼티 ⚙️

2. hasOwnProperty로 구분하기

const 마루 = { 이름: '마루' };
console.log(마루.hasOwnProperty('이름')); // true (자기 것)
console.log(마루.hasOwnProperty('toString')); // false (상속받은 것)

3. 성능 주의사항 ⚡

프로토타입 체인이 너무 길면 속성 찾기가 느려져요! 마치 100층 건물에서 엘리베이터 없이 계단으로 올라가는 것과 같아요 🏢

4. 모던 자바스크립트에서는...

• ES6 클래스 문법 사용 권장 ✨
• Object.create() 보다는 class extends 사용
• Next.js에서는 함수형 컴포넌트 + 훅스가 트렌드 🎣

실무에서 주의할 점 ⚠️

1. 프로토타입 오염 방지: 기본 객체 프로토타입 수정 금지
2. 메모리 효율성: 공통 메서드는 프로토타입에 정의
3. 디버깅: 상속 구조가 복잡하면 버그 찾기 어려움

---

면접 답변 💼

"프로토타입 상속의 동작 방식을 설명해주세요"

자바스크립트의 모든 객체는 [[Prototype]] 링크를 가지고 있으며, 객체의 속성에 접근할 때 해당 객체에서 먼저 찾고, 없으면 프로토타입 체인을 따라 상위 객체에서 차례로 탐색합니다. 이 과정은 속성을 찾거나 체인의 끝(null)에 도달할 때까지 계속됩니다. 이를 통해 코드 재사용성을 높이고 메모리를 효율적으로 사용할 수 있습니다.

 

---

 

프로토타입 상속의 동작 방식에 대해 설명해주세요.

프론트엔드와 관련된 질문이에요.

프로토타입은 자바스크립트에서 객체 간의 상속을 구현하는 메커니즘입니다. 자바스크립트의 모든 객체는 기본적으로 [[Prototype]]이라는 숨김 프로퍼티를 가지고 있으며, 이 프로퍼티는 다른 객체를 참조하거나 null 값을 가집니다. 프로토타입 연결은 Object.create()나 함수 생성자의 prototype 프로퍼티를 통해 이루어집니다.

프로토타입 상속이 동작하는 방식은 프로토타입 체인을 기반으로 합니다. 객체에서 어떤 프로퍼티를 접근하려고 할 때, 자바스크립트 엔진은 해당 객체에서 프로퍼티를 찾습니다. 그리고 만약 찾을 수 없다면, 객체의 [[Prototype]]이 가리키는 프로토타입 객체에서 프로퍼티를 탐색합니다. 만약 프로토타입 객체에서도 해당 프로퍼티를 찾지 못하면, 그 다음에는 프로토타입의 프로토타입을 탐색합니다. 탐색 과정을 계속 반복하면서 결국 원하는 프로퍼티를 찾거나, 프로토타입이 null이 되는 단계에 도달할 때까지 프로토타입 체인을 타고 올라가는 방식으로 탐색합니다. 이런 식으로 프로토타입이 꼬리에 꼬리를 물고 연결된 형태를 두고 프로토타입 체인이라고 부르는 것입니다.

예시 코드

// 1) Object.create()를 이용한 방식
const dog = {
  greet() {
    console.log('Hello from dog!');
  }
};

const maru = Object.create(dog); // maru의 프로토타입이 dog로 설정됨
maru.greet(); // "Hello from dog!" 출력

// 2) prototype 프로퍼티를 이용한 방식
function Dog() {}
Dog.prototype.greet = function () {
  console.log('Hello from Dog!');
};

const maru = new Dog(); // maru의 프로토타입이 dog로 설정됨
maru.greet(); // "Hello from Dog!" 출력

객체 maru가 dog를 프로토타입으로 갖는다고 가정해봅시다. 만약 maru.greet()을 호출했을 시 maru에 greet()이 없으면 프로토타입인 dog에 greet()이 존재하는지 탐색합니다. 이때 dog에 greet()이 존재하면 탐색을 멈추고 해당 메서드를 호출합니다. 만약 dog에도 존재하지 않는다면 프로토타입 체인의 끝에 도달할 때까지 상위 프로토타입을 계속 탐색해 나갑니다.