프로토타입

왜 프로토타입을 배우는가

프로토타입 정의

프로토타입과 객체 생성

프로토타입 체인

프로토타입 상속

ES6 class와 프로토타입

전체 요약

자바스크립트 프로토타입

왜 프로토타입을 배우는가?

자바스크립트는 C++, Java처럼 “클래스 기반” 언어가 아니라, 프로토타입 기반 언어이다.

즉, 객체가 어떤 틀(Class)로부터 생성되는 것이 아니라, 다른 객체를 자신의 부모처럼 삼는 방식으로 기능을 상속한다.

ES6에서 class 문법이 생기긴 했지만, 내부적으로는 여전히 프로토타입 기반 구조로 작동한다.

따라서 프로토타입을 이해하면:

•

객체가 어떻게 기능을 공유하는지

•

메모리가 어떻게 절약되는지

•

class 문법이 실제로 내부에서 무엇을 하는지

를 정확하게 이해할 수 있다.

프로토타입 정의

“객체의 원형”

프로토타입(Prototype)은 객체들이 공통적으로 사용하는 원형(부모 객체)을 의미한다.

자바스크립트에서 객체는 생성될 때 자동으로 특정 프로토타입과 연결된다.

이 프로토타입에는 공통 메서드나 속성을 저장해두고, 모든 객체는 이를 공유한다.

예제

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

Person.prototype.sayHello = function () {
  console.log(`안녕하세요, 저는 ${this.name}입니다.`);
};

const p1 = new Person("홍길동");
p1.sayHello();
JavaScript
복사

설명

•

Person.prototype 은 “Person 객체의 원형”

•

sayHello 는 모든 Person 인스턴스가 공유

•

p1 객체에 sayHello가 없지만, 부모인 Person.prototype에서 찾아 실행한다

프로토타입은 마치 “여러 객체가 함께 사용하는 공통 교과서”와 같다.

프로토타입과 객체 생성

객체를 생성할 때 프로토타입은 자동으로 연결된다.

특히 생성자 함수와 new 연산자로 생성할 때 다음 과정을 거친다.

예제

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

const p1 = new Person("철수");
JavaScript
복사

내부 동작 설명

new Person("철수") 는 아래 순서를 거친다.

새로운 빈 객체 {} 생성

새 객체의 __proto__ 가 Person.prototype 으로 연결

Person 함수 실행, this에 프로퍼티 저장

완성된 객체 반환

즉 다음이 항상 성립한다:

p1.__proto__ === Person.prototype // true
JavaScript
복사

이렇게 객체는 자신이 사용할 "부모" 역할의 프로토타입과 연결된다.

프로토타입 체인

객체에서 속성이나 메서드를 사용하려고 할 때, 자바스크립트는 다음 순서로 탐색한다.

obj 자체에서 method를 찾고

없으면 obj의 __proto__ (프로토타입)에서 찾고

그래도 없으면 그 상위 프로토타입에서 계속 탐색합니다.

이 연결된 탐색 경로를 프로토타입 체인(Prototype Chain)이라고 한다.

예제

const obj = { a: 1 };

console.log(obj.toString());
JavaScript
복사

설명

•

obj에는 toString이 없다

•

그래서 obj.proto → Object.prototype 에서 toString을 찾는다

•

Object.prototype도 없다면 null까지 탐색

•

null에서 끝나도록 설계되어 있다

즉, 체인은 다음과 같다:

obj → Object.prototype → null
Plain Text
복사

프로토타입 상속

프로토타입을 이용하면 객체 간 상속도 가능하다.

하위 객체가 상위 객체의 기능을 그대로 물려받게 하는 것이다.

아래는 Dog이 Animal의 기능을 상속하는 예시이다.

예제

function Animal(name) {
  this.name = name;
}
Animal.prototype.move = function () {
  console.log(this.name + " 이(가) 움직입니다.");
};

function Dog(name) {
  Animal.call(this, name); // Animal 생성자 실행
}

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

Dog.prototype.bark = function () {
  console.log(this.name + " 멍멍!");
};

const d = new Dog("바둑이");
d.move();  // 상속된 기능
d.bark();  // Dog 고유 기능
JavaScript
복사

설명

•

Object.create(Animal.prototype)

→ Dog.prototype 의 부모를 Animal.prototype으로 설정

•

Dog 인스턴스는 Animal의 메서드를 그대로 사용할 수 있다

•

이렇게 기능을 공유하고 확장하는 구조가 “프로토타입 상속”

ES6 클래스와 프로토타입의 관계

ES6에서 class 문법이 추가됐지만, 내부 동작은 프로토타입을 이용한다.

아래 class 코드는:

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

  sayHello() {
    console.log(`안녕하세요! ${this.name}`);
  }
}
JavaScript
복사

사실 내부적으로 다음과 같은 구조로 변환된다:

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

Person.prototype.sayHello = function () {
  console.log(`안녕하세요! ${this.name}`);
};
JavaScript
복사

즉, class는 단지 프로토타입을 쉽게 쓰도록 하는 문법적 설탕일 뿐이다.

전체 핵심 요약

주제	핵심 요약
프로토타입 정의	객체들이 공유하는 원형(부모 객체)
객체 생성과 프로토타입	new 연산 시 객체의 __proto__가 생성자.prototype에 연결
프로토타입 체인	객체 → 프로토타입 → Object.prototype → null 순으로 속성 탐색
프로토타입 상속	한 생성자의 prototype을 다른 prototype과 연결해 기능을 상속
class와 프로토타입	class는 프로토타입 기반 상속의 문법적 편의버전