[JS] 클래스와 인스턴스

💡 객체 지향 프로그래밍
하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴.

청사진은 클래스(class)라고 부르고, 청사진을 바탕으로 만든 객체를 인스턴스 객체(instance object) 줄여서 인스턴스 라고 부른다.

 

클래스를 만드는 방법

---

ES5이전 문법

function Car(brand, name, color) {
	this.brand = brand;
	this.name = name;
	this.color = color;
} // 속성
Car.prototype.refuel = function(){
	return "연료 공급";
} // 메서드
Car.prototype.drive = function(){
	return "운전 시작";
} // 메서드

 

ES6 문법

class Car {
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  } // 속성
  refuel(){
    return "연료 공급";
  } // 메서드
  drive(){
    return "운전 시작";
  } // 메서드
}

ES6부터는 class키위드를 사용합니다. 그 안에 생성자 함수(constructor)와 메서드가 들어있습니다.

속성을 정의할 때 this 키워드가 등장합니다. 여기서 this는 인스턴스 객체를 의미하는데, parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성 시 지정됩니다.

 

속성과 메서드

클래스에 속성과 메서드를 정의하고, 인스턴스에서 사용합니다.

자동차로 예를 들면 속성은 브랜드, 차 이름, 색상, 현재 연료량, 최고 속력 등으로 자동차의 상태를 정의합니다.

메서드는 ‘객체에 딸린 함수’입니다. 연료 공급, 운전 시작, 속력 조절 등 자동차의 동작을 결정합니다.

메서드는 ES5까지 메서드는 prototype이라는 키워드를 사용해야 정의할 수 있었지만 ES6부터는 class키워드 안쪽에 묶어서 정의합니다.

 

인스턴스에서 사용

---

위에서 설정한 속성과 메서드를 인스턴스에서 사용하는 방법

let avante = new Car("hyundai", "avante", "black")
avante.color; // "black"
avante.drive(); // "운전 시작"
avante.refuel(); // "연료 공급"

새로운 인스턴스를 만들기 위해서는 new 키워드를 사용합니다.

일반적인 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만듭니다. 일반적인 함수는 적절한 동사를 포함하고 소문자로 시작합니다.

각각의 인스턴스는 고유한 속성과 메서드를 갖게 됩니다.

 

용어 정리

---

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