Class

우리가 ppt를 만들 때, 사용하는 template이라고 생각하면 된다!!

• 한 번 만들어 놓으면 다양하게 활용이 가능.
• class = 붕어빵 틀!
• 팥을 넣으면 팥 붕어빵. 크림을 넣으면 크림 붕어빵
• 이러한 class에 데이터를 넣어 만든 팥 붕어빵, 크림 붕어빵을 Object라고 한다!
• class에 데이터를 넣어 object를 만드는과정을 instance화 라고 한다!

class 선언

const person(){
  //생성자
  constructor(name,age){
    //필드
    this.name = name;
    this.age = age;
  }
  //메서드
  speak(){
    console.log(`${this.name}+hello`);
  }
}


//Object 생성

const james = new person('james','20');
console.log(james.name);
console.log(james.age);
james.speak();

• 생성자는 내가 Object를 생성할 때 기입해야 할 필드들을 명시해준다.
• Object를 생성할 때에는 'new' 키워드를 사용해주면 된다.

getter and setter

• james 객체를 생성하면 james의 나이는 -1이 출력된다.
• 이러한 상황을 방지해 주는 것이 get, set 이다.

const person(){
  //생성자
  constructor(name,age){
    //필드
    this.name = name;
    this.age = age;
  }
  get age(){
    return this.age;
  }
  
  set age(value){
    this.age = value;
  }
}

const james = new person('james',-1);
console.log(james.age);

get으로 값을 가져오고, set으로 데이터를 할당한다고 이해해보자!

• getter를 설정하는 순간, 생성자의 this.age는 get 함수를 호출한다.

• setter 또한 생성자의 age는 age 값을 할당할 때, 바로 메모리에 값을 할당하는 것이 아니라, setter를 호출하게 된다.

• 그 결과, = age가 실행되는 순간 계속해서 setter를 호출하기 때문에 'Maximum call stack size exeed' 라는 에러가 발생하게 된다.

• 이를 방지하기 위해 _를 붙여주면 된다.

get age(){
 return this._age;
}

set age(value){
  this._age = value
}

이제 나이에 음수를 넣는 경우를 방지해보자!

set age(value){
  this._age = value < 0 ? 0 : value;
}

const james = new person('james',-1);
console.log(james.age);

age를 호출할 때, _age로 호출하지 않는 이유는 생성자 내부에서 set을 호출하기 때문이다!!

Static

Object에 상관 없이 class 고유의 공통된 값(field)이나 메서드들을 사용하고 싶다면!

class Animal{
 static title = '포유류';
 constructor(animalNum){
   this.animalNum = animalNum;
 }

 static printAll(){
   console.log('동물원입니당 ㅎㅎ');
 }
}

• 사용법은 객체를 생성해 사용하는 것이 아니라, 클래스 자체에서 호출해 주어야 한다!!

//error
const animal1 = new Animal(23);
animal1.printAll();

//Good
Animal.printAll();
console.log(Animal.title);

어디서나 공통된 메서드나 필드를 사용할 때 사용하면 된다.

상속

class를 생성할 때, 공통된 혹은 하위 개념의 class를 생성해야할 경우에 상위 클래스를 상속하므로써 불필요한 코드의 반복을 줄이고 재사용성을 높이기 위해 사용!

class Car {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

    brand() {
        console.log(`${this.name} 자동차 입니다.`);
    }

    detail() {
        console.log(`${this.color}색의 ${this.name}입니다.`);
    }
}

class Mercedes extends Car {}
class Bmw extends Car{}

const benz = new Mercedes("벤츠", "파랑");
const bmw = new Bmw("비엠", "검정");
benz.brand();
benz.detail();
bmw.brand();
bmw.detail();

• 요렇게 쉽게 사용 가능하다!
• 그런데, 만약 benz의 detail만 좀 더 추가하고 싶다면?! - overriding!

class Mercedes extends Car {
    detail() {
        console.log(`이번에 출시된 신차입니다!!`);
    }
}

• 단순히 다른 내용이 아니라 부모 class의 detail() 내용까지 포함시키고 싶다면? -super!!

class Mercedes extends Car {
    detail() {
      	super.detail():
        console.log(`이번에 출시된 신차입니다!!`);
    }
}

instanceOf

해당 객체가 특정 클래스를 활용하여 만들어진 것인지 확인할 수 있다. T/F 반환!

console.log(benz instanceof Car);
console.log(bmw instanceof Car);
console.log(bmw instanceof Object);
console.log(bmw instanceof Bmw);

• 모두 True !
• 모든 객체는 Object를 상속하기 때문에 3번째두 true!