JavaScript Prototype

prototype이란?

JavaScript에서 모든 객체는 portotype(프로토타입)을 가지고 있으며, 이를 통해 다른 객체의 속성과 메서드를 상속반는다.

1. 예제로 이해하는 프로토타입

기본 개념 : 프로토타입 체인

const person = {
	name: "Alice",
    greet: function() {
    	console.log("Hello, " + this.name);
	},
};

person.greet();  // Hello, Alice

👉 이 코드에서는 person 객체가 greet 메서드를 직접 가지고 있다

❓ 그런데 만약 우리가 새로운 객체를 만들면서 기존 객체의 기능을 그대로 물려받고 싶다면?
프로토타입을 이용하면 가능하다.

---

2. 프로토타입의 핵심 개념 3가지

📌 1) 모든 객체는 __proto__라는 숨겨진 프로퍼티를 가진다.

const obj = {};
console.log(obj.__proto__ === Object.prototype); //true

• 모든 객체는 __proto__라는 속성을 가지고 있음
• obj.__proto__는 Object.prototype을 가리킴

즉, obj는 Object.prototype에 정의된 기능을 자동으로 상속받음!

📌 2) 프로토타입 체인(Prototype Chain)

객체에서 속성을 찾을 때 없으면 프로토타입에서 찾는다.

cosnt obj = {};
console.log(obj.toString()); // [object Object]

👉 obj에는 toString이 직접 없지만, Object.prototype.toString()이 상속되었기 때문에 사용할 수 있다.

🔎 프로퍼티를 찾는 과정

1. obj 내부에서 toString을 찾음 → 없음 ❌
2. obj.__proto__ (Object.prototype)에서 toString을 찾음 → 있음 ✅

💡 이렇게 부모 → 조상 객체를 따라 올라가는 과정을 "프로토타입 체인"이라고 한다.

📌 3) prtotype VS __proto__ 차이점

개념	설명
__proto__	객체가 가진 프로토타입 참조
prototype	함수가 가지고 있으며, 이 함수로 생성된 객체들의 부모 역할

🔥 prototype을 사용하는 예제 (생성자 함수)

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

person.prototype.sayHello = function() {
	console.log("Hello, I'm " + this.name);
};

const alice = new Person("Alice");
alice.sayHello();  //Hello, I'm Alice

✔ alice.__proto__ === Person.prototype→ alice는 Person.prototype의 기능을 상속받음!
✔ sayHello()를 직접 alice 안에 정의하지 않았지만, Person.prototype에서 찾을 수 있기 때문에 사용 가능!

---

3. class와 프로토타입의 관계

💡 JavaScript에서 class는 사실 프로토타입을 기반으로 동작한다.
즉, class는 프로토타입 문법을 더 쉽게 쓰도록 만들어진 것이다.

class Animal {
	constructor(name) {
    	this.name = name;
	}
    speak() {
    	console.log(`${this.name} makes a noise`);
	}
}

const dog = new Animal("Dog");
dog.speak();  // Dog makes a noise

✔ 내부적으로 Animal.prototype.speak에 메서드가 저장됨
✔ dog.__proto__ === Animal.prototype → 프로토타입 체인을 따라 speak()를 찾음

즉, class는 prototype의 문법을 더 쉽게 쓰도록 도와주는 껍데기 같은 것이다.

---

4. 프로토타입을 활용한 상속

💡 기존 기능을 재사용하려면 프로토타입을 활용한 상속을 할 수 있다.

🛠 부모 객체 만들기

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

Animal.prototype.speak = function () {
  console.log(`${this.name} makes a noise`);
};

🛠 자식 객체 만들기 (상속)

function Dog(name) {
  Animal.call(this, name); // 부모의 생성자 호출
}

Dog.prototype = Object.create(Animal.prototype); // 프로토타입 상속
Dog.prototype.constructor = Dog; // 생성자 수정

Dog.prototype.bark = function () {
  console.log(`${this.name} barks!`);
};

const myDog = new Dog("Buddy");
myDog.speak(); // Buddy makes a noise
myDog.bark();  // Buddy barks!

✔ Dog은 Animal의 기능을 그대로 물려받으면서, bark() 같은 새로운 기능도 추가 가능!

---

🎯 정리: 프로토타입이란?

1. 모든 객체는 __proto__를 가지고 있으며, 이를 통해 부모 객체의 속성과 메서드를 상속받음.
2. 객체의 메서드나 속성을 찾을 때, 해당 객체에 없으면 프로토타입 체인을 따라 올라가며 찾음.
3. prototype은 생성자 함수가 가진 속성으로, 이 함수로 생성된 객체들의 부모 역할을 함.
4. class는 결국 프로토타입을 쉽게 사용하기 위한 문법적인 설탕(Syntactic Sugar)일 뿐!
5. 프로토타입을 활용하면 코드 재사용이 가능하며, 상속도 쉽게 구현할 수 있음!