JavaScript - 클래스와 인스턴스

클래스(Class)

객체를 만들어 내기 위한 설계도 혹은 청사진이다.
일반적인 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만든다.
참고로 일반적인 함수는 적절한 동사를 포함하며, 소문자로 시작한다.

 

인스턴스(Instance)

클래스를 바탕으로 한 객체를 인스턴스 객체, 줄여서 인스턴스라고 한다.

 

New 키워드

new키워드를 사용하여 클래스의 인스턴스를 만들어낸다.

 

생성자(Constructor) 함수

객체를 만들고 기존 객체의 속성에 대한 값을 설정하는 특수함수. 인스턴스가 초기화될 때 실행된다.

 

 

실습

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

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

 

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

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

 

new 키워드를 통해 클래스의 인스턴스를 만들어 낼 수 있다. 여기서 각각의 인스턴스는 Car라는 클래스의 고유한 속성과 메서드를 갖는다.

let avante = new Car( `hyundai`, `avante`, `black`);
let mini     = new Car( `bmw`, `mini`, `white`);

 

클래스의 속성 & 메소드 정의하기 

- 아래에서 this라는 새로운 키워드가 등장한다. this는 인스턴스 객체를 의미한다.

// ES5
function Car(brand, name, color) {
  this.brand = brand;
  this.name = name;
  this.color = color;
  // 클래스의 속성 정의
} 
Car.prototype.refuel = function() { // 연료 공급을 구현하는 코드 }
Car.prototype.drive = function() { // 운전을 구현하는 코드 }
// 클래스의 메소드 정의


//ES6
class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
    // 클래스의 속성 정의
  }
  refuel() {  }
  drive() {  }
  // 클래스의 메소드 정의
}

 

인스턴스에서의 사용

let avante = new Car( `hyundai`, `avante`, `black`);
avante.color; // `black`
avante.drieve(); // drive() 메소드에 정의된 값 출력