Class & OOP(객체지향 프로그래밍)
in JavaScript
클래스를 하나 만들어놓고 무한대로 찍어서 만들어낼 수 있다
예를 들어, 우리가 진짜 자주 쓰는 Date 는 이미 내장이 되어있으므로 내장객체라고 부른다.
내장객체말고 실제로 내가 원하는대로 객체를 만들어서 사용할 수도 있다.
const date = new Date()
date.getFullYear()
date.getMonth()
date.getDate()
기본 예제
그럼 실제 예시를 보자
class Monster {
power = 10
attack = () => {
console.log('공격!')
}
run = () => {
console.log('도망가자!')
}
}
const myMonster1 = new Monster();
myMonster1.attack();
myMonster1.run();
const myMonster2 = new Monster();
myMonster2.attack();
myMonster2.run();
여기서 myMonster1 과 myMonster2 는 객체이지만 또 다른 말로 인스턴스라고도 함.
초기값 다르게 세팅 예제
근데 만약 1번 몬스터와 2번 몬스터의 파워를 다르게 세팅하고 싶다면? 어떻게하면 될까.
그때 사용할 수 있는 함수가 있는데, 바로 생성자 함수이다.
constructor 함수인데, 바로 초기값을 세팅해주는 함수다.
그래서 만약 2번몬스터의 초기파워값을 30으로 주고싶다면
class Monster {
power = 10
constructor(power){
this.power = power;
}
attack = () => {
console.log('공격!')
}
run = () => {
console.log('도망가자!')
}
}
const myMonster2 = new Monster(30);
myMonster2.attack();
myMonster2.run();
이렇게 받으면 된다.
클래스 상속 예제
class Monster {
power = 10
constructor(power){
this.power = power;
}
attack = () => {
console.log('공격!')
}
}
class SkyMonster extends Monster {
run = () => {
console.log('날아서 도망가자!')
}
}
class GroundMonster extends Monster {
run = () => {
console.log('뛰어서 도망가자!')
}
}
const myMonster1 = new SkyMonster();
myMonster1.attack();
myMonster1.run();
const myMonster2 = new GroundMonster();
myMonster2.attack();
myMonster2.run();
공통된 기능을 묶어서 사용할 수 있고, 상속을 받아서 새로운 클래스를 만들어낼 수 있다.
부모class에 전달 예제
class Monster {
power = 10
constructor(power){
this.power = power;
}
attack = () => {
console.log('공격!')
}
}
class SkyMonster extends Monster {
constructor(power){
super(power)
}
run = () => {
console.log('날아서 도망가자!')
}
}
class GroundMonster extends Monster {
constructor(power){
super(power)
}
run = () => {
console.log('뛰어서 도망가자!')
}
}
const myMonster1 = new SkyMonster(10);
myMonster1.attack();
myMonster1.run();
const myMonster2 = new GroundMonster(30);
myMonster2.attack();
myMonster2.run();
const myMonster1 = new SkyMonster(10); 이렇게되면 SkyMonster 클래스의 contructor에만 반영이 되는데,
이때 부모 클래스의 power를 수정하고 싶으면,
그때는 super 를 사용하면 된다.
