프로토타입과 클래스 (객체 생성자, prototype)

이 문서는 fastcampus 강의 를 듣고 정리한 문서입니다. 문제가 있을 경우 s26788761@naver.com 으로 문의주세요! 😀

객체 생성자

함수를 통해 새로운 객체를 만들고, 그 안에 넣고 싶은 값 또는 함수를 구현할 수 있게 해줌!

Animal이라는 객체 생성자 를 만들어 보면

//객체 생성자를 만들때는 대문자로 시작! 그리고 뒤 괄호에 넣어주고 싶은 값을 넣어줌
function Animal(type, name, sound) {
	this.type = type; //여기서 'this'는 아래에서 만든 객체를 의미
	this.name = name;
	this.sound = sound;
	this.say = function() { //익명함수
		console.log(this.sound);
	}
}

//객체 생성자를 사용하여 새로운 객체를 만들때는 new라는 키워드를 사용한다!
const dog = new Animal('개', '멍멍이', '멍멍'); //이 순간에 새로운 객체가 만들어지고
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say(); //'멍멍' 출력
cat.say(); //'야옹' 출력

여기서 포인트!!

1. 객체 생성자 를 만들때는 함수 이름을 대문자 로 시작한다.
2. 객체 생성자 를 사용할때는 new 라는 키워드를 사용한다!!

그리고 위의 코드를 보면, dog와 cat이라는 객체가 만들어질때마다 새로운 함수가 만들어짐!! (But 함수의 내용은 똑같음)
-> 살짝 비효율 적!!

이럴때는 프로토타입 이라는 것을 사용하면 된다!

prototype

function Animal(type, name, sound) {
	this.type = type;
	this.name = name;
	this.sound = sound;
}

Animal.prototype.say = function() { //prototype 설정!
	console.log(this.sound);
}

//생략... 

이렇게 하면 기존 코드와 동일하게 동작함!

그리고 위 코드는 이렇게 한 것과 동일하다

//생략... 
const dog = new Animal('개', '멍멍이', '멍멍'); 
const cat = new Animal('고양이', '야옹이', '야옹');

function say() {
	console.log(this.sound);
}

dog.say = say;
cat.say = say;

모든 Animal에게 공통된 함수를 가지고 있게 하는 것!

즉 함수 외에도 객체들에게 어떤 값을 함께 공유?하고 싶을 때 사용할 수 있다.

//생략... 
const dog = new Animal('개', '멍멍이', '멍멍'); 
const cat = new Animal('고양이', '야옹이', '야옹');

Animal.prototype.sharedValue = 1; //이렇게 공유하고 싶은 값 prototype으로 설정!

console.log(dog.sharedValue); //1 출력
console.log(cat.sharedValue); //1 출력

프로토타입의 역할 : 객체 생성자로 무언가를 만들었을때, 만들어진 객체들끼리 공유할 수 있는 값이나 함수 등을 설정할 수 있다!