자바스크립트 프로토타입 상속이란? 🚀 쉽게 이해하는 객체지향의 비밀!

1. 프로토타입 상속이란?

자바스크립트는 프로토타입 기반 언어(prototype-based language)로, 프로토타입을 이용해 객체가 다른 객체의 속성과 메서드를 상속받을 수 있도록 합니다.

✅ 쉽게 말해?

• "객체가 다른 객체로부터 필요한 기능을 빌려 쓰는 방식!"
• "프로토타입 체인을 통해 객체가 연결되고 상속이 이루어진다!"

---

2. 프로토타입과 프로토타입 체인

📌 프로토타입(prototype)

자바스크립트에서는 모든 객체가 숨겨진 프로토타입(__proto__)을 가지며, 이 프로토타입은 해당 객체의 부모 역할을 합니다.

const animal = { eats: true };
const rabbit = { jumps: true };

rabbit.__proto__ = animal; // rabbit이 animal을 상속받음

console.log(rabbit.eats); // true
console.log(rabbit.jumps); // true

✅ 프로토타입 체인이란?

• 객체가 특정 속성이나 메서드를 찾을 때 프로토타입을 따라 계속 올라가면서 찾는 과정입니다.

---

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

자바스크립트에서 객체가 특정 속성이나 메서드를 사용할 때의 동작은 다음과 같습니다:

1️⃣ 객체에서 먼저 속성이나 메서드를 찾음
2️⃣ 찾지 못하면 객체의 프로토타입(__proto__)에서 다시 찾음
3️⃣ 프로토타입에서도 찾지 못하면 프로토타입의 프로토타입까지 올라가며 찾음 (프로토타입 체인)
4️⃣ 최종적으로 없으면 undefined를 반환

📌 예시

const animal = { eats: true };
const rabbit = { jumps: true };
const longEar = { earLength: 10 };

rabbit.__proto__ = animal;
longEar.__proto__ = rabbit;

console.log(longEar.eats); // true (animal에서 찾음)
console.log(longEar.jumps); // true (rabbit에서 찾음)
console.log(longEar.earLength); // 10 (자신에게서 찾음)

✅ 프로토타입 체인: longEar → rabbit → animal → Object.prototype → null

---

4. 프로토타입 상속의 장점 🔥

• 메모리 효율성: 메서드를 객체마다 복사하지 않고 공유하여 사용 가능
• 재사용성 증가: 코드를 효율적으로 재사용할 수 있음
• 유연성: 객체 간의 관계를 쉽게 수정하거나 확장 가능

✅ 객체지향 프로그래밍(OOP)의 장점을 프로토타입 방식으로 구현 가능!

---

5. 프로토타입 상속 활용 방법

📌 생성자 함수와 프로토타입

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.sayHello(); // Hello, my name is Alice

✅ 클래스 문법(ES6+) 활용

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person2 = new Person('Bob');
person2.sayHello(); // Hello, my name is Bob

✅ 클래스 방식도 내부적으로는 프로토타입 상속으로 동작합니다!

---

6. 프로토타입 상속의 주의점 🚨

• 프로토타입 체인이 너무 길어지면 성능이 저하될 수 있음
• 프로토타입 객체의 메서드를 변경하면, 모든 하위 객체가 영향을 받음
• 프로토타입을 직접 수정하는 것은 권장되지 않음

✅ 따라서 프로토타입 체인은 간결하게 유지하고, 수정보다는 확장을 권장합니다!

---

7. 결론 🎯

✅ 프로토타입 상속은 자바스크립트의 중요한 개념으로 객체 간 속성과 메서드를 효율적으로 공유하게 해줍니다!
✅ 프로토타입 체인을 잘 이해하면 더 나은 코드 설계와 효율적인 객체 지향 프로그래밍을 할 수 있습니다!

👉 이제 프로토타입 상속을 활용하여 더 멋진 자바스크립트 코드를 작성해 보세요! 🚀