[node.js] class VS 생성자 함수

📌 생성자 함수

생성자 함수는 와플 기계, 생성자는 와플..

-> ES6가 나오면서 class가 대체 (일종의 syntactic sugar 임)

 

📌 class 란?

객체지향 프로그래밍(OOP)에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀 -> 객체의 설계도

인스턴스화 : 클래스(객체의 설계도)를 이용해서 실제 객체를 만드는 과정

✔️ class 로 구현 예시

// @ts-check

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

  drive() {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다.`);
  }
}

const hyundai = new Car('hyundai', 'darkblue');
const porsche = new Car('porsche', 'black');
const toyota = new Car('toyota', 'silver');

console.log(hyundai.brand, hyundai.color);

porsche.drive();
toyota.drive();

 

 

✔️ 생성자 함수로 구현

// 생성자 함수로 위와 동일하게 구현
function Car(brand, color) {
  this.brand = brand;
  this.color = color;
  this.drive = function () {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다.`);
  };
}

const hyundai = new Car('hyundai', 'darkblue');
const porsche = new Car('porsche', 'black');
const toyota = new Car('toyota', 'silver');

console.log(hyundai.brand, hyundai.color);

porsche.drive();
toyota.drive();

 

✅ class vs 생성자 함수

 

1. class는 암묵적으로 strict mode 가 기본적으로 실행 됨

(var 와 let, const 의 관계를 떠올리시면 편함)

 

2. 상속이 더 편리

• 생성자 함수 : 프로토 타입 체인으로 상속
• 클래스 : extends 키워드로 상속

3. 정적 메서드 사용 방식

• 생성자 함수 : 함수 몸체에 직접 추가
• 클래스 : Static 키워드 사용

 

✔️ class의 strict mode

아래의 코드를 실행하면, class는 error 발생/ 생성자 함수는 결과 출력

// @ts-check

const hyundai = new Car('hyundai', 'darkblue');
const porsche = new Car('porsche', 'black');
const toyota = new Car('toyota', 'silver');

console.log(hyundai.brand, hyundai.color);

porsche.drive();
toyota.drive();

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

  drive() {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다.`);
  }
}

생성자 함수는 strict mode 가 적용되지 않기 때문에, 선언전에 사용이 되어도 자동으로 호이스팅(hoisting)이 일어나서 문제가 없음 

 

✔️ class의 상속 

class : 기존의 클래쓰의 틀을 토대로 새로운 클래스를 만들 수 있음

기존 클래스의 변수, 메소드 등을 그대로 가져가면서 자신이 원하는 변수, 메소드를 추가 또는 변경해서 사용 가능

상속은 extends를 이용해서 쉽게 가능 

부모 요소의 것을 그대로 받아 올 때는 super 사용 

// @ts-check

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

  drive() {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다.`);
  }
}

// js 한 파일당 하나의 클래쓰 권장해서 eslint 난리남 ㅋㅋ
class ElecCar extends Car {
  constructor(brand, color, fuel) {
    super(brand, color);
    this.fuel = fuel;
  }

  showFuel() {
    console.log(`해당 자동차는 ${this.fuel}의 힘으로 주행합니다.`);
  }
}

const hyundai = new Car('hyundai', 'darkblue');
const porsche = new Car('porsche', 'black');
const toyota = new Car('toyota', 'silver');
const tesla = new ElecCar('tesla', 'red', 'electricity');

// console.log(hyundai.brand, hyundai.color);
// porsche.drive();
// toyota.drive();
console.log(tesla.brand, tesla.color, tesla.fuel);
tesla.showFuel();

위의 코드 그림 설명

 

📍 overriding : 부모 클래스의 메소드를 그대로 사용하고 싶지 않을 때 상속 받은 클래스에서 메소드를 임의로 변경하여 사용하는 것

class ElecCar extends Car {
  constructor(brand, color, fuel) {
    super(brand, color);
    this.fuel = fuel;
  }

  drive() {
    console.log(
      `${this.brand}의 ${this.color}색 자동차가 ${this.fuel}의 힘으로 주행 중입니다.`
    );
  }
}

 

📍 super

: 부모 클래스에 접근하고 싶을 때 사용 

부모 메서드에 접근 

super.method()

부모 생성자에 접근

super(constructor)

 

📍 instanceof

: 특정 object가 해당 클래스를 통해 만들어졌는지 여부를 알아보는 명령어 

const hyundai = new Car('hyundai', 'white');
const tesla = new ElecCar('tesla', 'red', 'electricity');
console.log(hyundai instanceof Car); //true
console.log(tesla instanceof Car); //true (상속 받아왔으니까)

 

✔️ 생성자 함수의 상속

생성자 함수에서 상속을 구현하려면 prototype 이라는 객체를 사용

(class 쓰삼)

function Car(brand, color) {
  this.brand = brand;
  this.color = color;
  this.drive = function () {
    console.log(`${this.brand}의 ${this.color}색 자동차가 주행 중입니다.`);
  };
}

function ElecCar(brand, color, fuel) {
  Car.call(this, brand, color);
  this.fuel = fuel;

  this.drive = function () {
    console.log(
      `${this.brand}의 ${this.color}색 자동차가 ${this.fuel}의 힘으로 주행 중입니다.`
    );
  };
}

ElecCar.prototype = Object.create(Car.prototype);
ElecCar.prototype.constructor = ElecCar;

const tesla = new ElecCar('tesla', 'red', 'elec');
tesla.drive();