맨날 헷갈리는 클래스와 인스턴스

애매하게 아는 건가 싶어서 정리하며 적어본 완전 쌩 기초 객체지향 프로그래밍(OOP) 개념들.
(예시로 든 car 메이커/모델명은 전혀 랜덤)

1) 생성자 함수

function Car(maker, model) {
  this.maker = maker;
  this.model = model;
  this.move = function() {
    console.log('move'); // 이렇게 정의한 메소드는 인스턴스를 만들 때마다 새로 생성됨 (비효율)
  }
}

Car.prototype.stop = function() {
  console.log('stop');
} // 이렇게 정의한 프로토타입은 Car의 프로토타입으로 생성됨 

const a = new Car();
console.log(a); // maker, model, move를 가진 인스턴스 생성됨
a.stop(); // 프로토타입 체이닝을 통해 stop 메소드 사용 가능

2) Class 문법

class Car2 {
  constructor(maker, model) {
    this.maker = maker;
    this.model = model;
    this.move = function() {
      console.log('move');
    }
  }
  
  stop() { // Car.prototype.stop과 같음
    console.log('stop');
  }
  
  run = () => console.log('run'); // 클래스 필드 (정식 지원 X) 

  static getAllMakers(...cars) { // 클래스와 관련있지만 인스턴스와는 상관 없는 정적 메소드
    return cars.map(car => car.maker);
  }
}

const b = new Car2();
console.log(b); // maker, model, move, run을 가진 인스턴스 생성됨
b.stop(); // 프로토타입 체이닝을 통해 stop 메소드 사용 가능
console.log(b.__proto__.constructor); // class Car2

b.getAllMakers(); // 못찾음 => 정적 메소드 getAllMakers의 this는 Car2
console.log(Car2.getAllMakers(
  { maker: 'samsung', model: 'sonata' },
  { maker: 'hyundai', model: 'brazer' },
)); // 잘찾음 => ['samsung', 'hyundai']

3) 클래스 상속

class K9 extends Car2 {
  constructor(name) {
    super(); // 서브 클래스에서 constructor를 쓸 때는 this 전에 먼저 super() 호출해야 함
    this.owner = name;
  }
  isOccupied() {
    if (this.owner) return true;
    return false;
  }
}

const c = new K9('sy');
console.log(c); // maker, model, move, run, owner를 가진 인스턴스 생성됨
c.stop(); // 'stop'
console.log(c.isOccupied()); // true

class K7 extends Car2 {
  constructor(maker, model, name) {
    super(maker, model); // 부모 클래스로부터 매개변수를 받아옴
    this.owner = name;
  }
  isOccupied() {
    if (this.owner) return true;
    return false;
  }
}

const d = new K7('samsung', 'k8', 'sy'); 
console.log(d);
console.log(K7.getAllMakers()); // 부모 클래스의 정적 메소드에 접근 가능

참고 :
클래스
(https://helloworldjavascript.net/pages/270-class.html)
MDN
(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)