JavaScript 프로토타입과 상속

🧬 자바스크립트의 프로토타입과 상속 (Prototype & Inheritance)

자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반 언어입니다. 클래스가 없어도 상속이 가능하고, 모든 객체는 자신의 부모 객체인 prototype을 참조합니다.

📌 1. 프로토타입이란?

모든 자바스크립트 객체는 숨겨진 링크 [[Prototype]]을 가지고 있으며, 이는 다른 객체를 참조합니다. 이 참조를 통해 속성과 메서드를 상속받을 수 있어요.

const user = {
  sayHello: function() {
    console.log("안녕하세요!");
  }
};

const student = {
  __proto__: user
};

student.sayHello(); // 안녕하세요!

student는 자신의 프로토타입으로 user를 참조하므로 sayHello()를 사용할 수 있습니다.

💡 __proto__는 객체 간 상속 관계를 표현하는 비표준 속성입니다. 실제 내부에서는 [[Prototype]] 이라는 내부 슬롯이 사용됩니다.

🧪 2. 프로토타입 체인

객체에 없는 속성을 참조하면 프로토타입 체인을 따라 위로 올라가며 검색합니다.

console.log(student.toString()); 
// Object → prototype → toString()

student → user → Object.prototype 순으로 올라가서 toString()을 찾습니다.

✅ 이처럼 프로토타입을 따라가는 방식으로 상속을 구현하는 것을 프로토타입 체인이라고 합니다.

🔧 3. 생성자 함수와 prototype 속성

함수는 객체를 생성하는 생성자로도 사용할 수 있고, 생성된 객체는 생성자의 prototype을 참조합니다.

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

Person.prototype.sayHi = function() {
  console.log(`안녕! 나는 ${this.name}`);
};

const p1 = new Person("영수");
p1.sayHi(); // 안녕! 나는 영수

p1은 Person.prototype을 자신의 프로토타입으로 삼고, 그 안에 있는 sayHi를 상속받습니다.

🧱 4. 클래스 문법 (ES6+)

ES6부터는 class 키워드로 더 직관적인 방식으로 상속이 가능해졌습니다. 그러나 내부적으로는 여전히 프로토타입 기반입니다.

class Animal {
  speak() {
    console.log("소리를 낸다!");
  }
}

class Dog extends Animal {
  bark() {
    console.log("멍멍!");
  }
}

const d = new Dog();
d.speak(); // 소리를 낸다!
d.bark();  // 멍멍!

Dog는 Animal을 상속받아 speak()를 사용할 수 있습니다.

🔍 5. 프로토타입 상속 정리

• 자바스크립트는 프로토타입 체인을 통해 상속을 구현한다.
• 모든 객체는 숨겨진 [[Prototype]] 참조를 가진다.
• 함수는 prototype 속성을 가지며, 이걸 통해 인스턴스가 메서드를 상속받는다.
• class 문법은 기존 프로토타입 기반 상속을 감싼 문법 설탕이다.

☕ 깊이 있는 이해를 원한다면 직접 console.dir()로 객체의 prototype을 살펴보세요!