16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

16. 프로토타입과 상속의 비밀/16.1 prototype 개념

16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

thejavascript4kids 2025. 7. 23. 01:40

📘 16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

프로그래밍을 배우는 여러분께 조용히 전해드립니다. 지난 시간, 우리는 프로토타입이라는 존재를 만났습니다. 그것은 객체들이 함께 나누어 쓸 수 있는 소중한 도구상자 같은 것이었지요.

이제 그보다 더 깊은 이야기를 함께 나누려 합니다. 프로토타입들 사이에 흐르는 보이지 않는 연결에 대해서 말입니다. 마치 할머니에서 어머니로, 어머니에서 나로 이어지는 따뜻한 손길처럼, 프로토타입들도 서로 이어져 있습니다. 이것을 프로토타입 체인이라고 부릅니다.

🧠 새로운 단어들과 친해지기

프로토타입 체인을 이해하는 여정에서 만날 단어들을 차근차근 살펴보겠습니다.

단어	쉬운 설명
프로토타입 체인 (prototype chain)	객체가 필요한 것을 찾을 때, 가족의 연결고리를 따라 올라가듯이 이어진 프로토타입들을 차례로 찾아보는 따뜻한 연결망입니다.
기능 찾기 과정 (property lookup)	객체에서 필요한 기능을 찾는 조용한 여행으로, 마치 집 안에서 필요한 물건을 차근차근 찾아보는 것과 같습니다.
Object.prototype	모든 객체의 뿌리가 되는 존재로, 가장 기본적인 기능들을 품고 있는 최상위 프로토타입입니다.

chain이라는 영어 단어는 "사슬", "연결고리"를 뜻합니다. 프로토타입들이 보이지 않는 사슬로 하나씩 연결되어 있다는 뜻을 담고 있습니다.

✨ 프로토타입 체인의 핵심 개념

프로토타입 체인은 자바스크립트에서 객체들 사이의 은밀한 연결 방법과 기능 공유를 가능하게 하는 중심 구조입니다. 이것이 어떻게 숨쉬고 있는지 천천히 들여다보겠습니다.

자바스크립트의 모든 객체는 자신만의 프로토타입과 조용히 연결되어 있습니다. 이 연결은 __proto__라는 내부 속성을 통해 이루어집니다. 객체에서 어떤 속성이나 기능을 찾으려고 할 때, 자바스크립트는 매우 체계적인 과정을 밟아갑니다.

첫 번째 발걸음에서는 객체 자기 자신에서 해당 속성이나 기능을 찾습니다. 만약 여기서 찾으면 바로 그것을 사용하고 여행을 마칩니다. 마치 자신의 방에서 필요한 것을 먼저 찾아보는 것처럼 자연스럽습니다.

두 번째 발걸음에서는 자신에게 없다면, 자신의 프로토타입으로 가서 찾습니다. 여기서 찾으면 그것을 사용합니다. 마치 자신의 방에 없으면 어머니의 방에서 찾아보는 것처럼 당연합니다.

세 번째 발걸음에서는 프로토타입에도 없다면, 프로토타입의 프로토타입으로 올라가서 찾습니다. 이 과정이 조용히 반복됩니다. 마치 어머니의 방에도 없으면 할머니의 방에서 찾아보는 것처럼 자연스럽습니다.

마지막 발걸음에서는 이렇게 계속 올라가다가 Object.prototype이라는 최상위 프로토타입에 도달합니다. 여기에도 없으면 자바스크립트는 "그런 건 없습니다"(undefined)라고 조용히 알려줍니다.

이런 과정을 통해 객체들은 마치 가족의 소중한 것들을 물려받듯이 상위 프로토타입의 속성과 기능들을 사용할 수 있게 됩니다.

마음속에 그려보는 이야기: 마을 도서관에서 책 찾기

프로토타입 체인을 더 깊이 이해하기 위해서 '마을 도서관에서 책 찾기' 이야기를 함께 그려보겠습니다.

여러분이 어떤 특별한 책을 찾고 있다고 상상해보세요. 마을 도서관은 5층으로 되어 있고, 각 층마다 다른 성격의 책들이 조용히 자리하고 있습니다.

1층(객체 자신)에는 가장 최신 책들과 가장 자주 사용하는 책들이 있습니다. 원하는 책이 여기 있다면 바로 가져다 쓸 수 있습니다. 이것이 객체가 자신의 속성을 사용하는 경우입니다.

2층(첫 번째 프로토타입)에는 좀 더 전문적인 책들이 있습니다. 1층에서 못 찾았다면 계단을 올라 2층으로 가서 찾아봅니다. 여기서 찾으면 이것을 사용합니다.

3층과 4층(더 상위 프로토타입들)에는 더 오래되고 기본적인 책들이 있습니다. 아래층에서 못 찾았다면 계속 위로 올라가면서 찾아봅니다.

5층(Object.prototype)에는 가장 기본적이고 모든 사람이 사용할 수 있는 기초 도서들이 있습니다. 이곳은 도서관의 최고층이라 더 이상 올라갈 곳이 없습니다.

만약 5층까지 가서도 원하는 책이 없다면, 도서관 사서가 "죄송하지만 그런 책은 우리 도서관에 없습니다"(undefined)라고 조용히 말해주겠지요.

이처럼 프로토타입 체인도 객체에서 시작해서 점점 상위 프로토타입으로 올라가면서 원하는 것을 찾는 과정과 같습니다.

🎯 프로토타입 체인을 사용하는 이유

그렇다면 자바스크립트는 왜 이런 섬세한 체인 구조를 사용할까요? 여러 소중한 이유들이 있습니다.

첫째로 메모리를 아껴서 사용할 수 있습니다. 만약 모든 객체가 필요한 모든 기능을 각자 가지고 있다면 엄청난 메모리 낭비가 일어날 것입니다. 하지만 프로토타입 체인을 통해 공통 기능들을 나누어 쓰면, 하나의 기능을 여러 객체가 함께 사용할 수 있어서 메모리를 크게 절약할 수 있습니다.

둘째로 코드를 다시 활용할 수 있습니다. 상위 프로토타입에 정의된 기능들을 하위 객체들이 자동으로 사용할 수 있어서, 같은 코드를 여러 번 작성할 필요가 없습니다. 마치 할머니의 좋은 도구를 어머니와 손녀가 모두 사용할 수 있는 것과 같습니다.

셋째로 새로운 기능을 쉽게 추가할 수 있습니다. 프로토타입에 새로운 기능을 추가하면, 이미 생성된 모든 객체들도 자동으로 그 기능을 사용할 수 있게 됩니다. 마치 도서관에 새 책을 추가하면 모든 이용자가 그 책을 빌릴 수 있게 되는 것과 같습니다.

마지막으로 체계적인 구조를 만들기가 가능합니다. 프로토타입 체인을 통해 객체 지향 프로그래밍의 상속 개념을 자연스럽게 구현할 수 있습니다.

⚙️ 기본 문법 살펴보기

프로토타입 체인을 확인하고 활용하는 기본적인 방법들을 차근차근 살펴보겠습니다.

// 객체와 프로토타입 연결 확인하기
객체.__proto__ === 생성자.prototype

// 프로토타입 체인 따라가기
객체.__proto__.__proto__ // 프로토타입의 프로토타입

// instanceof 연산자로 체인 확인하기
객체 instanceof 생성자 // 객체가 해당 생성자의 인스턴스인지 확인

프로토타입 체인 탐색 과정:

객체 자신에서 속성/기능 검색
객체의 프로토타입(__proto__)에서 검색
프로토타입의 프로토타입에서 검색
계속 위로 올라가며 검색
Object.prototype까지 도달
그래도 없으면 undefined 반환

🧪 직접 해보면서 배우기

이제 실제 예제를 통해 프로토타입 체인이 어떻게 조용히 동작하는지 자세히 알아보겠습니다.

🔹 첫 번째 예시: 동물 가족의 프로토타입 체인

첫 번째 예시에서는 동물 가족을 통해 프로토타입 체인의 기본 개념을 알아보겠습니다.

// 동물을 만드는 생성자 함수
function Animal(name) {
  this.name = name; // 각 동물의 이름을 조용히 저장합니다
}

// 모든 동물이 공유할 기능들을 추가합니다
Animal.prototype.eat = function() {
  return `${this.name}이(가) 맛있게 먹고 있어요.`;
};

Animal.prototype.sleep = function() {
  return `${this.name}이(가) 편안하게 자고 있어요.`;
};

// 강아지를 만드는 생성자 함수
function Dog(name, breed) {
  this.name = name;     // 동물의 이름
  this.breed = breed;   // 강아지만의 속성을 추가합니다
}

// Dog의 프로토타입을 Animal의 프로토타입과 연결합니다
// 복잡한 방법 대신 간단하게 연결하는 방법을 사용하겠습니다
Dog.prototype = Animal.prototype;

// 강아지만의 기능을 추가합니다
Dog.prototype.bark = function() {
  return `${this.name}이(가) 멍멍 짖어요!`;
};

// 강아지 객체를 만들어 보겠습니다
const myDog = new Dog("바둑이", "진돗개");

// 프로토타입 체인을 통한 기능 사용해보기
console.log(myDog.bark());  // 자신의 기능을 사용합니다
console.log(myDog.eat());   // Animal에서 물려받은 기능을 사용합니다
console.log(myDog.sleep()); // Animal에서 물려받은 기능을 사용합니다

// 체인 관계를 확인해보기
console.log(myDog instanceof Dog);    // true - 강아지입니다
console.log(myDog instanceof Animal); // true - 동물이기도 합니다
console.log(myDog instanceof Object); // true - 객체이기도 합니다

이 과정을 차근차근 살펴보면, myDog.eat()을 호출할 때 자바스크립트는 먼저 myDog 객체 자신에서 eat 기능을 찾습니다. 없으니까 Dog.prototype에서 찾아보고, 거기서 Animal.prototype의 eat 기능을 찾아서 실행하는 것입니다.

🔹 두 번째 예시: 배열의 프로토타입 체인 탐험

이번에는 우리가 평소에 사용하는 배열의 프로토타입 체인을 살펴보겠습니다.

// 배열을 만들어 보겠습니다
const myArray = [1, 2, 3];

// 배열의 프로토타입 체인을 확인해보기
console.log("=== 배열의 프로토타입 체인 ===");
console.log("myArray.__proto__ === Array.prototype:", 
            myArray.__proto__ === Array.prototype); // true

console.log("Array.prototype.__proto__ === Object.prototype:", 
            Array.prototype.__proto__ === Object.prototype); // true

console.log("Object.prototype.__proto__:", 
            Object.prototype.__proto__); // null (체인의 끝입니다)

// 프로토타입 체인을 통한 기능 사용해보기
console.log("\n=== 프로토타입 체인 기능 사용 ===");
console.log("myArray.push(4):", myArray.push(4)); // Array.prototype의 기능
console.log("myArray.toString():", myArray.toString()); // Array.prototype의 기능
console.log("myArray.hasOwnProperty('length'):", 
            myArray.hasOwnProperty('length')); // Object.prototype의 기능

// instanceof로 체인 관계 확인하기
console.log("\n=== instanceof 확인 ===");
console.log("myArray instanceof Array:", myArray instanceof Array);   // true
console.log("myArray instanceof Object:", myArray instanceof Object); // true

이 예시에서는 배열이 실제로 Array.prototype과 Object.prototype으로 이어지는 체인을 가지고 있다는 것을 확인할 수 있습니다. 그래서 배열에서 toString() 같은 기본 객체 기능도 사용할 수 있는 것입니다.

🔹 세 번째 예시: 프로토타입 체인에서 기능 찾기 과정

마지막 예시에서는 프로토타입 체인에서 기능을 찾는 구체적인 과정을 보여드리겠습니다.

// 할아버지 역할의 생성자
function Grandparent() {
  this.generation = "할아버지";
}

Grandparent.prototype.wisdom = function() {
  return "할아버지의 지혜: 경험이 최고의 선생님이란다.";
};

// 아버지 역할의 생성자
function Parent() {
  this.generation = "아버지";
}

// 간단한 방법으로 연결하기
Parent.prototype = Grandparent.prototype;

Parent.prototype.experience = function() {
  return "아버지의 경험: 꾸준히 노력하면 된단다.";
};

// 자식 역할의 생성자
function Child() {
  this.generation = "자식";
}

// 간단한 방법으로 연결하기
Child.prototype = Parent.prototype;

Child.prototype.energy = function() {
  return "자식의 에너지: 모든 게 재미있어요!";
};

// 자식 객체를 만들어 보겠습니다
const child = new Child();

// 프로토타입 체인 검색 과정을 보여드리겠습니다
console.log("=== 프로토타입 체인 검색 과정 ===");

// 1. 자신의 기능 사용하기
console.log("child.energy():", child.energy());

// 2. Parent에서 찾아서 사용하기
console.log("child.experience():", child.experience());

// 3. Grandparent에서 찾아서 사용하기
console.log("child.wisdom():", child.wisdom());

// 4. Object.prototype에서 찾아서 사용하기
console.log("child.toString():", child.toString());

// 5. 없는 기능을 호출해보기
console.log("child.fly는 뭘까요?:", child.fly); // undefined

// 체인 구조 확인하기
console.log("\n=== 체인 구조 확인 ===");
console.log("child instanceof Child:", child instanceof Child);           // true
console.log("child instanceof Parent:", child instanceof Parent);         // true
console.log("child instanceof Grandparent:", child instanceof Grandparent); // true
console.log("child instanceof Object:", child instanceof Object);         // true

이 예시를 통해 프로토타입 체인이 실제로 어떻게 3대에 걸쳐 연결되어 있는지, 그리고 각 단계에서 기능을 찾는 과정이 어떻게 이루어지는지 명확하게 볼 수 있습니다.

🔄 프로토타입 체인 검색 과정 정리

지금까지 배운 프로토타입 체인의 검색 과정을 차분히 정리해보겠습니다.

첫 번째 단계는 객체 자신 검색입니다. 호출된 속성이나 기능이 객체 자신에게 있는지 먼저 확인합니다. 두 번째로는 첫 번째 프로토타입 검색 단계입니다. 객체의 __proto__가 가리키는 프로토타입에서 찾아봅니다.

세 번째는 상위 프로토타입들 검색 단계입니다. 찾을 때까지 프로토타입 체인을 따라 계속 위로 올라갑니다. 네 번째로는 Object.prototype 도달 단계입니다. 모든 체인의 최상위인 Object.prototype까지 검색합니다.

마지막으로 검색 완료 단계에서 찾았으면 그것을 사용하고, 끝까지 못 찾았으면 undefined를 반환합니다.

🧚‍♀️ 이야기로 다시 배우기: 기술 전수의 가문

지금까지 배운 내용을 하나의 이야기로 다시 정리해보겠습니다.

옛날 어느 기술자 가문에는 대대로 내려오는 기술들이 있었습니다. 이 가문의 기술자들은 매우 특별한 방식으로 기술을 물려받았습니다.

가장 어린 기술자 조이는 자신만의 특별한 기술 몇 개를 가지고 있었습니다. 하지만 어떤 기술을 사용하려고 할 때 자신이 모르는 기술이면, 자동으로 아버지의 기술 매뉴얼을 찾아보게 되었습니다.

아버지의 매뉴얼에도 없으면, 이번에는 할아버지의 전통 기술서를 펼쳐보았습니다. 할아버지의 기술서에도 없으면 증조할아버지의 고전 기술 문서로 올라갔습니다.

마침내 가문의 최고 조상이신 대장인의 원본 기술서까지 올라가서 찾아보았습니다. 여기에는 모든 기술자가 사용할 수 있는 기본적인 기술들이 기록되어 있었습니다.

그런데 만약 이 원본 기술서에도 없는 기술이라면? 그때는 "그런 기술은 이 세상에 존재하지 않습니다"라는 메시지가 나타났습니다.

이처럼 조이는 자신의 기술 → 아버지의 기술 → 할아버지의 기술 → 증조할아버지의 기술 → 대장인의 원본 기술서 순서로 기술을 찾을 수 있었고, 이것이 바로 프로토타입 체인과 같은 구조였습니다.

가문의 모든 기술자들이 이런 방식으로 기술을 물려받았기 때문에, 새로운 기술이 조상의 기술서에 추가되면 모든 후손들이 자동으로 그 기술을 사용할 수 있게 되었습니다.

🧠 자주 하는 실수와 주의할 점

프로토타입 체인을 사용할 때 자주 발생하는 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있습니다.

❌ 실수 1: 프로토타입을 직접 대입하기

function Animal() {}
Animal.prototype.eat = function() {
  return "맛있게 먹고 있어요";
};

function Dog() {}

// 지금은 간단한 방법을 사용하지만, 나중에 더 안전한 방법을 배울 거예요
Dog.prototype = Animal.prototype;

Dog.prototype.bark = function() {
  return "멍멍!";
};

// 이렇게 하면 Animal.prototype에도 bark가 추가되어 버려요!
const animal = new Animal();
console.log(animal.bark()); // "멍멍!" - 동물도 짖게 되었어요!

// 이런 현상을 주의해야 해요

지금은 간단한 방법을 사용하고 있지만, 이런 문제가 있다는 것을 알아두세요. 나중에 더 안전한 방법을 배우게 될 것입니다.

❌ 실수 2: 인스턴스에서 prototype 속성을 사용하려고 하기

function Dog(name) {
  this.name = name;
}

Dog.prototype.bark = function() {
  return "멍멍!";
};

const myDog = new Dog("바둑이");

// 잘못된 방법 - 인스턴스에는 prototype 속성이 없어요
try {
  myDog.prototype.newMethod = function() {
    return "새 기능";
  };
} catch (error) {
  console.log("에러: 인스턴스에는 prototype 속성이 없어요.");
}

// 올바른 방법들
// 1. 생성자의 prototype에 추가하기
Dog.prototype.newMethod = function() {
  return "새 기능";
};

// 2. 인스턴스에 직접 추가하기 (해당 인스턴스만)
myDog.specialMethod = function() {
  return "특별한 기능";
};

console.log(myDog.newMethod());     // "새 기능"
console.log(myDog.specialMethod()); // "특별한 기능"

인스턴스 객체는 prototype 속성을 가지지 않습니다. 이 속성은 오직 생성자 함수에만 존재합니다.

❌ 실수 3: 프로토타입 체인을 너무 길게 만들기

// 과도하게 긴 프로토타입 체인 (권장하지 않아요)
function Level1() {}
function Level2() {}
function Level3() {}
function Level4() {}
function Level5() {}

// 체인을 너무 길게 연결하는 것은 좋지 않아요
Level2.prototype = Level1.prototype;
Level3.prototype = Level2.prototype;
Level4.prototype = Level3.prototype;
Level5.prototype = Level4.prototype;

// 너무 긴 체인은 성능에 좋지 않아요
const obj = new Level5();

// 권장하는 방법: 적당한 길이의 체인
function Animal() {}
function Mammal() {}
function Dog() {}

// 3-4단계 정도가 적당해요
Mammal.prototype = Animal.prototype;
Dog.prototype = Mammal.prototype;

const goodDog = new Dog();

프로토타입 체인이 너무 길면 속성을 찾는 시간이 오래 걸려 성능이 저하될 수 있습니다. 일반적으로 3-4단계 정도가 적당합니다.

✏️ 직접 해보기 - 쉬운 연습 문제들

이제 배운 내용을 연습 문제를 통해서 확실히 익혀보겠습니다.

여러분이 지금까지 차근차근 쌓아온 지식들을 바탕으로, 작은 문제들을 하나씩 풀어보는 시간입니다. 마치 새로 배운 언어로 첫 문장을 써보는 것처럼, 설레고 조심스러운 마음으로 시작해보겠습니다.

Ex1) 도형 가족의 프로토타입 체인을 만들어보자

// 기본 도형을 만드는 생성자
function Shape() {
  this.type = "도형"; // 도형의 종류를 저장합니다
}

Shape.prototype.getType = function() {
  return this.type; // 도형의 종류를 알려주는 기능입니다
};

// 사각형을 만드는 생성자
function Rectangle(width, height) {
  this.width = width;   // 사각형의 가로 길이입니다
  this.height = height; // 사각형의 세로 길이입니다
  this.type = "사각형";  // 도형 종류를 사각형으로 설정합니다
}

Rectangle.prototype = Shape.prototype; // Shape를 상속받습니다

Rectangle.prototype.getArea = function() {
  return this.width * this.height; // 사각형의 넓이를 계산합니다
};

// 정사각형을 만드는 생성자
function Square(side) {
  this.width = side;    // 정사각형의 가로 길이
  this.height = side;   // 정사각형의 세로 길이
  this.type = "정사각형"; // 도형 종류를 정사각형으로 설정합니다
}

Square.prototype = Rectangle.prototype; // Rectangle을 상속받습니다

// 정사각형 객체를 만들어 보겠습니다
const mySquare = new Square(5);

// 프로토타입 체인을 통한 기능 사용해보기
console.log("타입:", mySquare.getType());      // Square 자신의 속성을 사용합니다
console.log("넓이:", mySquare.getArea());      // Rectangle에서 상속받은 기능을 사용합니다
console.log("문자열:", mySquare.toString());   // Object.prototype에서 상속받은 기능을 사용합니다

// 체인 관계 확인해보기
console.log("Square 인스턴스?", mySquare instanceof Square);    // true
console.log("Rectangle 인스턴스?", mySquare instanceof Rectangle); // true
console.log("Shape 인스턴스?", mySquare instanceof Shape);       // true

Ex2) 배열과 객체의 프로토타입 체인을 비교해보자

// 배열과 일반 객체를 만들어 보겠습니다
const myArray = [1, 2, 3];
const myObject = { name: "철수" };

// 프로토타입 체인을 비교해보기
console.log("=== 배열의 프로토타입 체인 ===");
console.log("Array.prototype?", myArray.__proto__ === Array.prototype); // true - 배열의 첫 번째 프로토타입입니다
console.log("Object.prototype?", myArray.__proto__.__proto__ === Object.prototype); // true - 배열의 두 번째 프로토타입입니다

console.log("\n=== 객체의 프로토타입 체인 ===");
console.log("Object.prototype?", myObject.__proto__ === Object.prototype); // true - 객체의 첫 번째 프로토타입입니다
console.log("체인의 끝?", myObject.__proto__.__proto__ === null); // true - 더 이상 올라갈 곳이 없습니다

// 공통 기능 사용해보기
console.log("\n=== 공통 기능 사용 ===");
console.log("배열 toString:", myArray.toString()); // Array.prototype의 toString을 사용합니다
console.log("객체 toString:", myObject.toString()); // Object.prototype의 toString을 사용합니다

// instanceof 확인해보기
console.log("\n=== instanceof 확인 ===");
console.log("myArray instanceof Array:", myArray instanceof Array);   // true
console.log("myArray instanceof Object:", myArray instanceof Object); // true
console.log("myObject instanceof Array:", myObject instanceof Array); // false
console.log("myObject instanceof Object:", myObject instanceof Object); // true

🤔 조금 더 어려운 문제로 실력 확인하기

기본 연습을 마쳤다면, 이제 조금 더 깊이 있는 문제들을 통해서 프로토타입 체인에 대한 이해를 확인해보겠습니다.

혹시 어려우시더라도 걱정하지 마세요. 이런 문제들을 통해 우리는 더 단단한 이해를 쌓아갈 수 있습니다. 마치 처음 자전거를 탈 때 넘어져도 다시 일어나는 것처럼, 실수하면서 배우는 것이 자연스럽습니다.

Q1. 다음 코드의 실행 결과를 예측하고, 프로토타입 체인의 동작 원리를 설명해보세요.

function A() {}
A.prototype.value = "A의 값";

function B() {}
B.prototype = A.prototype;
B.prototype.value = "B의 값";

function C() {}
C.prototype = B.prototype;

const c = new C();
console.log(c.value);

정답: 출력 결과는 "B의 값"입니다.

해설: 프로토타입 체인에서 속성을 찾을 때는 가장 가까운 프로토타입에서 찾습니다. c 객체는 value 속성을 직접 가지고 있지 않으므로 프로토타입 체인을 따라 올라갑니다. C.prototype에서 "B의 값"을 찾았기 때문에 "B의 값"을 반환합니다.

Q2. `proto`와 `prototype` 속성의 차이점은 무엇인가요?

정답: prototype은 생성자 함수의 속성으로, 해당 함수로 생성된 객체들이 상속받을 속성과 기능을 담고 있는 객체입니다. __proto__는 모든 객체가 갖는 내부 속성으로, 자신의 프로토타입을 가리킵니다. 즉, new Foo()로 생성된 객체의 __proto__는 Foo.prototype을 가리킵니다. prototype은 생성자 함수에서만 의미가 있고, __proto__는 모든 객체에서 프로토타입 체인을 구성합니다.

📚 복습 문제 - 이전에 배운 내용 기억하기

이제 이전 단원에서 배운 중요한 내용들을 복습해보며 기억을 새롭게 해보겠습니다!

🔄 복습 1: 프로토타입 기본 개념 (16.1.1 단원 복습)

// 문제: 다음 코드에서 빈 칸을 채워 Animal과 Dog의 프로토타입 관계를 완성해보세요.

// 동물 생성자 함수
function Animal(name) {
    this.name = name;
}

// 모든 동물이 공유할 기능을 조상에게 추가
Animal.______.eat = function() {  // 빈 칸 1: 프로토타입 속성
    return `${this.name}이(가) 먹이를 먹어요.`;
};

// 강아지 생성자 함수
function Dog(name, breed) {
    this.name = name;
    this.breed = breed;
}

// 강아지만의 기능 추가
Dog.______.bark = function() {  // 빈 칸 2: 프로토타입 속성
    return `${this.name}: 멍멍!`;
};

// 강아지 객체 만들기
let myDog = _____ Dog("바둑이", "진돗개");  // 빈 칸 3: 객체 생성 키워드

// 기능 사용하기
console.log(myDog.bark());

정답:

Animal.prototype.eat = function() {  // 빈 칸 1: prototype
    return `${this.name}이(가) 먹이를 먹어요.`;
};

Dog.prototype.bark = function() {  // 빈 칸 2: prototype
    return `${this.name}: 멍멍!`;
};

let myDog = new Dog("바둑이", "진돗개");  // 빈 칸 3: new

해설: 생성자 함수의 prototype 속성에 메서드를 추가하면 그 생성자로 만든 모든 객체가 해당 메서드를 공유할 수 있습니다. 객체를 만들 때는 new 키워드를 사용합니다.

🔄 복습 2: 프로토타입 실시간 수정하기 (16.1.1 단원 복습)

// 문제: 다음 코드의 실행 결과를 예측해보세요.

function Student(name) {
    this.name = name;
}

// 학생 객체들 만들기
let 철수 = new Student("철수");
let 영희 = new Student("영희");

// 나중에 프로토타입에 새 기능 추가
Student.prototype.study = function(subject) {
    return `${this.name}이(가) ${subject}를 공부해요.`;
};

// 이미 만들어진 객체들도 새 기능을 사용할 수 있을까요?
console.log(철수.study("수학"));
console.log(영희.study("영어"));

정답:

철수이(가) 수학를 공부해요.
영희이(가) 영어를 공부해요.

해설: 프로토타입에 나중에 추가한 메서드도 이미 생성된 모든 객체에서 즉시 사용할 수 있습니다. 이것이 프로토타입의 강력한 특징 중 하나입니다. 객체들은 메서드를 직접 가지고 있지 않고, 호출할 때마다 프로토타입에서 찾기 때문입니다.

지금까지 프로토타입 체인의 모든 특성과 활용법을 자세히 알아보았습니다. 프로토타입 체인은 자바스크립트의 상속과 객체 지향 프로그래밍을 가능하게 하는 핵심 메커니즘이며, 이를 이해하면 자바스크립트의 동작 원리를 더 깊이 있게 이해할 수 있습니다!

✅ 학습 완료 체크리스트

이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!

학습 내용	이해했나요?
프로토타입 체인의 기본 개념	✅
체인 검색 과정과 순서	✅
instanceof와 체인 관계 확인	✅
자주 하는 실수들과 해결법	✅
실전 예제 이해	✅

📂 마무리 정보

오늘 배운 16.1.2 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: 프로토타입 체인은 자바스크립트의 핵심 원리입니다. 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

'16. 프로토타입과 상속의 비밀 > 16.1 prototype 개념' 카테고리의 다른 글

16.1.3 `__proto__`와 `prototype` - 두 친구의 다른 역할 (0)	2025.07.24
16.1.1 프로토타입이라는 특별한 시스템 - 자바스크립트의 독특한 가족 연결 방식 (0)	2025.07.23

현재글16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

초중고등학생 자바스크립트 교재

이 교재는 초등학생부터 성인까지, 누구나 자바스크립트를 쉽게 배우고 스스로 코딩을 즐겁게 경험할 수 있도록 AI와 함께 정성껏 설계하였습니다. 프로그래밍이 처음이신가요? 걱정하지 않으셔도 됩니다.

모듈패턴, 산술연산자, async_await, 비동기, 자바스크립트, JavaScript, 비교연산자, 모듈, 코딩교재, 싱글턴패턴, Import, 논리연산자, 초등코딩, Promise, ES6모듈, setTimeout, 자바스크립트교재, 중등코딩교육, Export, 연산자,

Today :
Yesterday :

일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

초중고등학생 자바스크립트 교재

16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

📘 16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

🧠 새로운 단어들과 친해지기

✨ 프로토타입 체인의 핵심 개념

마음속에 그려보는 이야기: 마을 도서관에서 책 찾기

🎯 프로토타입 체인을 사용하는 이유

⚙️ 기본 문법 살펴보기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 동물 가족의 프로토타입 체인

🔹 두 번째 예시: 배열의 프로토타입 체인 탐험

🔹 세 번째 예시: 프로토타입 체인에서 기능 찾기 과정

🔄 프로토타입 체인 검색 과정 정리

🧚‍♀️ 이야기로 다시 배우기: 기술 전수의 가문

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 프로토타입을 직접 대입하기

❌ 실수 2: 인스턴스에서 prototype 속성을 사용하려고 하기

❌ 실수 3: 프로토타입 체인을 너무 길게 만들기

✏️ 직접 해보기 - 쉬운 연습 문제들

Ex1) 도형 가족의 프로토타입 체인을 만들어보자

Ex2) 배열과 객체의 프로토타입 체인을 비교해보자

🤔 조금 더 어려운 문제로 실력 확인하기

Q1. 다음 코드의 실행 결과를 예측하고, 프로토타입 체인의 동작 원리를 설명해보세요.

Q2. `proto`와 `prototype` 속성의 차이점은 무엇인가요?

📚 복습 문제 - 이전에 배운 내용 기억하기

🔄 복습 1: 프로토타입 기본 개념 (16.1.1 단원 복습)

🔄 복습 2: 프로토타입 실시간 수정하기 (16.1.1 단원 복습)

✅ 학습 완료 체크리스트

📂 마무리 정보

'16. 프로토타입과 상속의 비밀 > 16.1 prototype 개념' 카테고리의 다른 글

'16. 프로토타입과 상속의 비밀/16.1 prototype 개념'의 다른글

티스토리툴바

16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

📘 16.1.2 프로토타입 체인 - 가족처럼 이어진 특별한 연결고리

🧠 새로운 단어들과 친해지기

✨ 프로토타입 체인의 핵심 개념

마음속에 그려보는 이야기: 마을 도서관에서 책 찾기

🎯 프로토타입 체인을 사용하는 이유

⚙️ 기본 문법 살펴보기

🧪 직접 해보면서 배우기

🔹 첫 번째 예시: 동물 가족의 프로토타입 체인

🔹 두 번째 예시: 배열의 프로토타입 체인 탐험

🔹 세 번째 예시: 프로토타입 체인에서 기능 찾기 과정

🔄 프로토타입 체인 검색 과정 정리

🧚‍♀️ 이야기로 다시 배우기: 기술 전수의 가문

🧠 자주 하는 실수와 주의할 점

❌ 실수 1: 프로토타입을 직접 대입하기

❌ 실수 2: 인스턴스에서 prototype 속성을 사용하려고 하기

❌ 실수 3: 프로토타입 체인을 너무 길게 만들기

✏️ 직접 해보기 - 쉬운 연습 문제들

Ex1) 도형 가족의 프로토타입 체인을 만들어보자

Ex2) 배열과 객체의 프로토타입 체인을 비교해보자

🤔 조금 더 어려운 문제로 실력 확인하기

Q1. 다음 코드의 실행 결과를 예측하고, 프로토타입 체인의 동작 원리를 설명해보세요.

Q2. __proto__와 prototype 속성의 차이점은 무엇인가요?

📚 복습 문제 - 이전에 배운 내용 기억하기

🔄 복습 1: 프로토타입 기본 개념 (16.1.1 단원 복습)

🔄 복습 2: 프로토타입 실시간 수정하기 (16.1.1 단원 복습)

✅ 학습 완료 체크리스트

📂 마무리 정보

'16. 프로토타입과 상속의 비밀 > 16.1 prototype 개념' 카테고리의 다른 글

'16. 프로토타입과 상속의 비밀/16.1 prototype 개념'의 다른글

관련글

티스토리툴바

Q2. `proto`와 `prototype` 속성의 차이점은 무엇인가요?