📖 [JavaScript] 클래스(Class)

📌 생성자 함수

비슷한 객체를 보다 쉽게 여러개 만들기 위해서 생성

const User = function(name, age){
  this.name = name;
  this.age = age;
  this.showName = funciton() {
    console.log(`hello, ${name}`)
  }
}
const mike = new User('Mike' , 30);

📌 클래스

class User2{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

const tom = new User2('Tom', 19)

new를 통해 호출했을 때 내부에서 정의된 내용으로 객체를 생성하는 것은 생성자함수와 동일!
constructor: 객체를 만들어주는 생성자 메세지
객체를 초기화하기 위한 값이 정해지고, 인수를 넘겨받을 수 있음
showName() 은 User2의 prototype에 저장됨

따라서, mike는 객체 내부에 showName,
tom은 prototype안에 showName이 있음

✔️ 차이점

1.

*생성자 함수
const User = function(name, age){
  this.name = name;
  this.age = age;
};

User.prototype.showName = funciton() {
    console.log(`hello, ${name}`)
  };

const mike = User('Mike' , 30); //new를 빼봄
mike // undefined
for(const p in mike) {
  console.log(p);
} //name age showName

*클래스
class User2{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

const tom = User2('Tom', 19)
tom // 에러
for(const p in tom) {
  console.log(p);
} //name age

☑️ proto 안에 있는 constructor을 보면, User2 에는 constructor가 class라고 명시
constructor가 class라는 걸 알고 있고, 이 경우에 new 없이 호출하면 에러 발생

2.

*생성자 함수
const User = function(name, age){
  this.name = name;
  this.age = age;
};

User.prototype.showName = funciton() {
    console.log(`hello, ${name}`)
  };

const mike = new User('Mike' , 30); 

for(const p in mike) {
  console.log(p);
} //name age showName

*클래스
class User2{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }
  showName(){
    console.log(this.name)
  }
}

const tom = new User2('Tom', 19)

for(const p in tom) {
  console.log(p);
} //name age

☑️ for in 문은 propo 안에 있는 property를 모두 보여주고,
객체가 가지고 있는 property만 판별하기 위해서 hasOwnProperty를 사용해야 했음
Class 메소드는 for in 문에서 제외!

✔️ 상속

extends 키워드를 사용!

class Car{
  constructor(color) {
    this.color = color;
    this.wheels=4;
  }
  drive() {
    console.log('drive...');
  }
  stop() {
    console.log('Stop!');
  }
}

class Bmw extends Car {
  park() {
    console.log('PARK!');
  }
}

const z4 = new Bmw('blue');

z4.drive(); //drive.. 
>일단 z4 -> proto -> proto (Car)

✔️ 메소드 오버라이딩

만약, Car, Bmw가 같은 메소드를 가지고 있다면...?

class Car{
  constructor(color) {
    this.color = color;
    this.wheels=4;
  }
  drive() {
    console.log('drive...');
  }
  stop() {
    console.log('Stop!');
  }
}

class Bmw extends Car {
  park() {
    console.log('PARK!');
  }
   stop() {
    console.log('OFF');
  }
}

const z4 = new Bmw('blue');

z4.stop(); //OFF 

동일한 이름의 메소드가 나오면 덮어 쓰게 됨

✔️ 오버라이딩(Overriding)

부모의 메소드를 그대로 사용하고 싶어서 확장하고 싶다면...?
supper를 사용하면 됨!
supper.method로 부모 클래스의 정의된 메소드 사용 가능! => 오버라이딩

class Car{
  constructor(color) {
    this.color = color;
    this.wheels=4;
  }
  drive() {
    console.log('drive...');
  }
  stop() {
    console.log('Stop!');
  }
}

class Bmw extends Car {
  park() {
    console.log('PARK!');
  }
   stop() {
     supper.stop();
    console.log('OFF');
  }
}

const z4 = new Bmw('blue');

z4.stop(); //Stop! OFF

✔️ 생성자 오버라이딩(Constructor Overriding)

class Car{
  constructor(color) {
    this.color = color;
    this.wheels=4;
  }
  drive() {
    console.log('drive...');
  }
  stop() {
    console.log('Stop!');
  }
}

class Bmw extends Car {
  constructor(){
    this.navigation = 1;
  }
  park() {
    console.log('PARK!');
  }
}

const z4 = new Bmw('blue')  //error 발생

☑️ constructor에서 this를 사용하기 전에 super constructor, 즉 부모 생성자를 반드시 먼저 호출해야 함!
extends로 할당된 자식 class는 빈 객체를 만들고 this를 할당하는 작업을 건너 뜀
따라서 항상 super키워드로 부모 class의 constructor를 생성해줘야함!!

class Car{
  constructor(color) {
    this.color = color;
    this.wheels=4;
  }
  drive() {
    console.log('drive...');
  }
  stop() {
    console.log('Stop!');
  }
}

class Bmw extends Car {
  constructor(){
    super();
    this.navigation = 1;
  }
  park() {
    console.log('PARK!');
  }
}

const z4 = new Bmw('blue') 

☑️ 잘 만들어짐, 이 때 blue를 넣어줬어도 color는 undefined,
자식 class의 constructor에 color를 받고 넘겨주는 작업을 해야함
동일한 인수를 받는 작업이 필요

즉,

class Bmw extends Car {
  constructor(color){
    super(color);
    this.navigation = 1;
  }
  park() {
    console.log('PARK!');
  }
}

🤔 처음에는 인수를 안 넣었어도 잘 동작했는데 왜일까?

class Bmw extends Car {
  park() {
    console.log('PARK!');
  }

☑️ 처음, 위 코드가 잘 동작한 이유:
constructor가 없으면, 그 부분이 있는 것처럼 행동(...args)줄 보기!

class Bmw extends Car {
  constructor(...args){
    super(...args);
  }
  park() {
    console.log('PARK!');
  }
}

const z4 = new Bmw('blue');

⭐️ 자식 생성자는 무조건 부모 생성자를 호출해야 함! ⭐️
자식 생성자에 constructor가 있으면, 처리되지 않아서
super()를 이용해서 호출해주고 this.property를 이용해서 할당해 줘야 함
constructor에서 color 값을 받은 후 super로 넘겨 줘야 잘 생성됨.