Javascript 인스턴스 vs 프로토타입

1. 생성자 함수 & 인스턴스

function Person(name) {
  this.name = name; // 인스턴스 개별 속성
}
const p1 = new Person("Alice");
const p2 = new Person("Bob");

console.log(p1.name); // Alice
console.log(p2.name); // Bob

• new Person("Alice") 실행 시,
  • 새로운 객체가 만들어지고,
  • this.name이 해당 인스턴스에 설정됨.
• 즉, 각 인스턴스는 독립적인 속성을 가짐.

하지만 모든 인스턴스가 같은 함수(메서드)를 개별적으로 가지면 메모리 낭비가 심함.
→ 해결책이 프로토타입!

2. 프로토타입이란?

모든 자바스크립트 객체는 숨겨진 __proto__ 링크를 가지고 있다.
이 링크를 통해 프로토타입 체인을 따라가며 필요한 속성이나 메서드를 찾음.

Person.prototype.sayHi = function() {
  console.log("Hi, " + this.name);
};

p1.sayHi(); // "Hi, Alice"
p2.sayHi(); // "Hi, Bob"

 

여기서 중요한 점:

• sayHi()는 p1, p2에 직접 존재하는 게 아니라 Person.prototype에 존재.
• 하지만 p1.sayHi()를 실행하면 프로토타입 체인을 따라 Person.prototype에서 메서드를 찾음.
• 이렇게 하면 메서드를 공유하므로 메모리를 절약할 수 있음.

3. 변수 찾는 순서 (프로토타입 체인)

console.log(p1.hasOwnProperty("name")); // true (인스턴스에 존재)
console.log(p1.hasOwnProperty("sayHi")); // false (프로토타입에 존재)

변수를 찾을 때, 자바스크립트는 다음 순서로 탐색한다.

 

1 인스턴스 내부

• p1.name → p1 자체에 name 속성이 있는지 확인
  2 프로토타입 객체 (Person.prototype)
• p1.sayHi() 실행 → p1에 직접 없으면 Person.prototype에서 찾음
  3 상위 프로토타입 체인 탐색 (Object.prototype)
• p1.toString() → Person.prototype에도 없으면 Object.prototype에서 찾음
  4없다면 undefined 반환

4. 프로토타입과 속성 읽기 vs 쓰기 차이

읽기 (Reading)

변수를 읽을 때는 프로토타입 체인을 따라가며 찾음.

console.log(p1.sayHi); // [Function: sayHi] (프로토타입에서 찾음)

쓰기 (Writing)

하지만 값을 할당하면 프로토타입이 아니라 인스턴스 자체에 속성이 추가됨.

p1.sayHi = function() {
  console.log("Hello!");
};

p1.sayHi(); // "Hello!" (새로운 메서드가 p1 인스턴스에 추가됨)
delete p1.sayHi; 
p1.sayHi(); // "Hi, Alice" (프로토타입의 메서드를 다시 사용)

 

즉,

• 읽기 → 프로토타입 체인 탐색
• 쓰기 → 인스턴스에 직접 추가됨

5. 정리 

- 인스턴스 → new 키워드로 생성된 객체
- 프로토타입 → 공통 메서드를 공유하는 객체
- 변수 찾는 순서 → 인스턴스 → 프로토타입 → 상위 프로토타입
- 읽기 vs 쓰기 차이 → 쓰면 인스턴스에 추가, 읽으면 프로토타입 탐색