class & instances

• class: 하나의 모델이 되는 청사진 것을 클래스라고 부른다.

• instances: 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이라고 부른다.

ES5 & ES6

ES5 클래스는 함수로 정의 할 수 있다.

funtion Car(brand, name, color){
  //인스턴스가 만들어질 때 실행되는 코드
}

ES6에서는 class라는 키워드를 이용해서 정의 할 수 도 있다.

class Car{
  constructor(brand, name, color){
    //인스턴스가 만들어질 때 실행되는 코드
  }

최근에는 ES6 방법을 주로 사용되고 있고 위에 보이는 함수는 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부르고 인스턴스가 만들어질 때 실행 되는 코드 이다.

클래스: 속성의 정의

ES5

function Car(brand, name, color){
  this.brand = brand;
  this.name = name;
  this.color = color;
}

ES6

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

• this는 인스턴스 객체를 의미하고 parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정하는 값이며, 위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미이다.
  
  

클래스: 메소드의 정의

ES5

function Car(brand, name, color){}

Car.prototype.refuel = function() {
  // 연료 공급을 구현하는 코드
}
Car.prototype.drive = function() {
  // 운전을 구현하는 코드
}

ES6

class Car {
  constructor(brand, name, color){}
  
  refuel(){
    // 연료 공급을 구현하는 코드
  }
  drive(){
    // 운전을 구현하는 코드
  }
}

• ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있고 Car 클래스에 메서드를 추가하기 위해서는 Car.prototype.refuel과 같이 prototype을 이용해야 한다.
• ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의하고 refuel() {}, drive() {}와 같이 작성되어 있는 부분이다.

인스턴스에서의 사용

let avante = new Car('hyundai', 'avante', 'black');
avante.color; // 'black'
avante.drive; // 아반떼가 운전을 시작합니다.

let mini = new Car('bmw', 'mini', 'white');
mini.brand; // 'bmw'
mini.refuel(); // 미니에 연료를 공급합니다

New 키워드

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

• 인스턴스를 만들 때에는 new 키워드를 사용한다.
• 즉시 생성자 함수가 실행되며 변수에 클래스의 설계를 가진 새로운 객체 즉 인스턴스가 할당된다.
• 각각의 인스턴스는 Car라는 클래스의 고유한 속성, 메소드를 갖게 된다.

prototype, constructor, this	설명
prototype	모델의 청사진을 만들 때 쓰는 원형 객체(original from)이다.
constructor	인스턴스가 초기화 될 때 실행하는 생성자 함수
this	함수가 실행 될때 해당 scope마다 생성되는 고유한 실행 context(execution context), new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this의 값이 된다.