클래스와 인스턴스

🔥 클래스(class)

객체를 생성하기 위한 하나의 틀(template), 청사진(blueprint) = class

• class는 일반적인 다른 함수와 구분하기 위해 대문자로 시작하고 일반 명사로 만든다.

ES5 클래스 작성 문법

- ES5 클래스는 함수로 정의

function Car(brand, name, color) {
  // 인스턴스가 만들어질 때 실행되는 코드
  this.brand = brand;
  this.name = name;
  this.color = color;
  
  // `this` : 인스턴스 객체
  /* parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정 값
   this에 할당한다 = 만들어진 인스턴스에 브랜드, 이름, 색상을 부여하겠다 */
  
  Car.prototype.refuel = function() {
    // 연료 공급 구현 코드 
	}
  Car.prototype.drive = function() {
    // 운전 구현 코드
	}
}

- ES5 메서드 정의 : prototype 키워드를 사용
위 코드 Car 클래스에 메서드를 추가하기 위해서는 Car.prototype.refuel과 같이 prototype을 이용해야 한다.

ES6 클래스 작성 문법

- ES6 클래스를 만드는 새로운 문법 도입 => class 키워드

class Car {
  constructor (brand, name, color) {
    // 인스턴스를 만들어질 때 실행되는 코드
    this.brand = brand;
  	this.name = name;
  	this.color = color;
    
    // `this` : 인스턴스 객체
    /* parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정 값
     this에 할당한다 = 만들어진 인스턴스에 브랜드, 이름, 색상을 부여하겠다 */
  }
  refuel() {
  }
  drive() {
  }
}  

- ES6 메서드 정의 : 생성자 함수와 함께 class 키워드 안쪽에 묶음
위 코드 refuel() {}, drive() {} 와 같이 작성해야 한다.

---

🔥 인스턴스(instance)

클래스(청사진)를 통해 만들어지는 객체(object) => instance

• 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다.
• 클래스의 고유한 property와 method를 갖는다.

new 키워드

- 인스턴스를 만들 때 new 키워드 사용

// `new` 키워드 사용해 인스턴스 생성
let avante = new Car('hyundai', 'avante', 'black');

// 속성과 메서드를 인스턴스에서 사용
avante.brand;  // 'hyundai'
avante.color;  // 'black'
avate.drive();  // 아반떼가 운전을 시작합니다


let mini = new Car('bmw', 'mini', 'white');
let beetles = new Car('volkswagen', 'beetles', 'red');

// 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메소드를 갖는다

---

constructor : 객체를 생성하는 함수

• 함수 이름의 첫 글자 대문자 & 반드시 new 연산자 붙여서 실행