프로토타입과 클래스 (class)

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

es6에서 class 라는 문법이 도입이 됨!

class 문법을 이용하여 객체 생성자를 통해 만든 Animal과 비슷하게 만든다고 하면

class Animal {
	constructor(type, name, sound) {
		this.type = type;
		this.name = name;
		this.sound = sound;
	}
	say() {
		console.log(this.sound);
	}
}

이렇게 할 수 있고

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

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

이렇게 정상적으로 실행됨을 알 수 있다.

그리고 위에서 say라는 함수를 class 내부에 구현을 했는데, 이 say 함수는 자동으로 프로토 타입으로 등록이 됨.

class Animal {
	constructor(type, name, sound) {
		this.type = type;
		this.name = name;
		this.sound = sound;
	}
	say() {
		console.log(this.sound);
	}
}

console.log(Animal.prototype.say);

위와 같이 Animal.prototype.say 를 출력하게 되면, 콘솔창에 함수가 이렇게 설정되어 있는 것을 알 수 있다.

그리고 class 를 사용하면 상속을 받아야 하는 상황에서 더 편하게 할 수 있다.

//생략...

class Dog extends Animal {
	constructor(name, sound) {
		super('개', name, sound);
	}
}

여기서 extends 라는 키워드가 특정 클래스를 상속받는다는 의미를 가지고 있고
Dog 클래스에서는 constructor만 선언해 주면 되는데, 이때 super 라는 함수를 사용하여 자신이 상속받은 class 의 constructor를 먼저 호출하고 나서 자신이 생성자 내에서 해야할 일을 처리함

정리하면 class 라는 문법은 객체 생성자 와 프로토타입 이라는 문법을 좀 더 편하게 쓰기위한 문법!

class 사용 예시

class Food {
	constructor(name) {
		this.name = name;
		this.brands = [];
	}
	addBrand(brand) {
		this.brands.push(brand);
	}
	print() {
		console.log(`${this.name}을 파는 음식점들:`);
		console.log(this.brands.join(', '));
	}
}

이렇게 Food class를 선언하고

//생략...

const pizza = new Food('피자');
pizza.addBrand('domino');
pizza.addBrand('papa johns');

pizza.print(); 

이렇게 실행하면

피자 을 파는 음식점들:
domino, papa johns

이렇게 출력됨.