프로토타입(Prototype)

✒️ 2025-05-23 16:49 내용 수정

프로토타입

JavaScript의 객체가 다른 객체로부터 상속을 받을 때 상속되는 정보를 제공하는 객체

참고 자료 : TCPSchool 프로토타입
JavaScript의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다.
객체 지향의 상속 개념(상속(Inheritance))과 같이 부모 객체의 property와 메소드를 상속받아서 사용할 수 있다.
이런 부모 객체들을 prototype 객체 또는 줄여서 prototype이라고 부른다.
- JavaScript는 클래스 기반의 객체 지향 언어와 달리 프로토타입 기반의 객체 지향 언어이기 때문에 클래스 기반의 객체 지향 언어와 조금 다르다.

프로토타입 체인

프로토타입이 상속되는 가상의 연결고리

객체 이니셜라이저를 사용해 생성된 같은 타입이 객체들은 모두 같은 프로토타입을 가진다.
- new 연산자로 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 가진다.
아래 예시에서 obj 객체의 프로토타입은 Object다.

var obj = new Object();

프로토타입 1.png

Java에서 ObjectObject 클래스가 모든 클래스의 부모 클래스였던 것처럼, JavaScript에서는 Object.prototype 객체가 모든 객체의 프로토타입이다.

var arr = new Array(); // 프로토타입이 Array이고, 더 올라가면 Object도 프로토타입으로 가진다.
console.log(arr);

프로토타입 2.png

프로토타입 생성

프로토타입의 생성은 객체 생성자 함수로 작성한다.
객체 문서에 해당 설명을 기재했다. 객체#4. 생성자 함수로 생성하기

function Computer(name, os) {
	this.name = name;
	this.os = os;
	this.poweron = function() {
		console.log('전원이 켜집니다.');
	}
}

var myCom = new Computer('one', 'windows'); // myCom의 프로토타입은 Computer

property 다루기

이미 생성된 객체에 property를 추가하는 것은 객체#property 추가 및 호출를 사용할 수 있지만, 프로토타입에 새로운 property를 추가하려면 다른 방법을 사용해야 한다.

1. 생성자에 추가하기

새로 추가할 property를 직접 프로토타입 생성자에 추가한다.

function Computer(name, os) {
	this.name = name;
	this.os = os;
	this.memory = '16GB'; // 새로 추가된 property
	this.poweron = function() {
		console.log('전원이 켜집니다.');
	}
}

var myCom = new Computer('one', 'windows');
console.log(myCom);

프로토타입 3.png

2. prototype property 사용하기

새로운 property를 추가할 객체의 prototype property를 사용하여 추가한다.

function Computer(name, os) {
	this.name = name;
	this.os = os;
	this.memory = '16GB'; // 새로 추가된 property
	this.poweron = function() {
		console.log('전원이 켜집니다.');
	}
}

var myCom = new Computer('one', 'windows');
Computer.prototype.cdrive = '500GB';

console.log(myCom);

프로토타입 4.png