🧬 JavaScript Prototype & 상속
프로토타입 체인과 상속 메커니즘을 시각적 시뮬레이터로 학습해보세요
🧬 JavaScript 프로토타입 쉽게 이해하기
복잡해 보이는 프로토타입을 실생활 예시와 시각적 설명으로 쉽게 배워보세요!
👨👩👧👦→🔗→💡
🤔 개념 이해하기
👨👩👧👦프로토타입이란?
프로토타입은 JavaScript 객체가 다른 객체로부터 기능을 '물려받는' 방식입니다. 마치 부모님으로부터 특징을 물려받는 것과 같습니다.
🏠 실생활 비유로 이해하기
🚗 자동차로 이해하기
🚙
모든 교통수단
이동수단이 가지는 기본 특성
↓
🚗
자동차
엔진으로 움직이는 차량의 특성
↓
🚙
SUV
SUV 타입 차량만의 특성
↓
🚐
내 차
구체적인 번호판을 가진 실제 차량
🐕 강아지로 이해하기
🌍
모든 생명체
생명이 있는 모든 것의 기본 특성
↓
🐾
동물
동물들이 공통으로 가지는 특성
↓
🐕
강아지
강아지 종류가 가지는 특성
↓
🦮
멍멍이
구체적인 이름을 가진 실제 강아지
🔍 프로토타입 체인 탐색 체험하기
프로토타입 체인 구조
1
myDog
실제로 만들어진 강아지 객체
name:"멍멍이"
age:3
breed:"골든 리트리버"
↑
2
Dog.prototype
모든 강아지가 공통으로 가지는 기능
bark:function() { return this.name + "이 멍멍!"; }
eat:function() { return this.name + "이 먹는다"; }
↑
3
Animal.prototype
모든 동물이 공통으로 가지는 기능
breathe:function() { return this.name + "이 숨을 쉰다"; }
sleep:function() { return this.name + "이 잠을 잔다"; }
↑
4
Object.prototype
모든 객체가 공통으로 가지는 기본 기능
toString:function() { return "[object Object]"; }
hasOwnProperty:function(prop) { ... }
프로퍼티 탐색하기
💻 실습으로 배우기
단계별 학습
코드 예제
// 1. 생성자 함수 정의
function Dog(name, breed) {
this.name = name;
this.breed = breed;
}
// 2. 프로토타입에 메서드 추가
Dog.prototype.bark = function() {
return this.name + "이 멍멍!";
};
// 3. 객체 생성 및 사용
const myDog = new Dog("멍멍이", "골든 리트리버");
console.log(myDog.bark());실행 결과
멍멍이가 멍멍!
설명
생성자 함수로 만든 모든 객체는 자동으로 프로토타입의 메서드를 사용할 수 있습니다.
⚠️ 주의사항 & 핵심 포인트
🚨 흔한 실수들
❌
prototype vs __proto__
prototype은 함수의 속성, __proto__는 객체의 숨겨진 링크
❌
프로토타입 오염
Object.prototype 수정하면 모든 객체에 영향
❌
성능 문제
긴 프로토타입 체인은 속도 저하 가능
💡 핵심 기억할 점
✅
상속의 핵심
코드 재사용과 메모리 효율성
✅
탐색 순서
자신 → 프로토타입 → 부모 → 최상위
✅
현실 사용
Array, Object 등 내장 객체도 프로토타입 활용
🧑💻
1nnovator 김민성
JavaScript 학습 센터 개발자
🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!
🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.