클래스와 인스턴스

객체지향 프로그래밍

객체지향 프로그래밍이란 프로그램 구현에 필요한 객체를 파악하고 각각의 객체들의 역할이 무엇인지를 정의하여 객체들 간의 상호작용을 통해 프로그램을 만드는 것을 말한다. 여기서 객체는 javascript에 내장되어있는 object 가 아니며 인스턴스 객체 (instance object), 줄여서 인스턴스(instance) 라는 명칭으로, 프로그램은 클래스 (class)라는 명칭으로 불린다.

클래스와 인스턴스

클래스

---

클래스는 일종의 원형(origianl form)으로, 객체를 생성하기 위한 아이디어나 청사진이다. javascript에서는 일반적인 함수를 정의하듯 생성하며 일반적인 함수와의 구분을 위해 보통 대문자로 시작, 일반 명사로 만든다. 하지만 ES6문법에서 클래스를 만드는 새로운 문법이 도입되어 function 대신 class를 사용하여 만드는 것이 가능해졌으며 최근에는 ES6 방법이 주로 사용된다.

클래스의 예)

//ES5문법을 적용한 예
function Car (brand, name, color){
	//인스턴스가 만들어질 때 실행되는 코드
}

// ES6문법을 적용한 예
class Car {
	constructor(brand, name, color) {
    	//인스턴스가 만들어질 때 실행되는 코드
    }
}

ES6문법을 적용한 클래스는 생성자(constructor)함수를 포함하고 있으며 인스턴스가 초기화 될 때 실행, return값을 만들지 않는다.

인스턴스

---

인스턴스는 클래스의 사례(instance object)이다.javascript에서 인스턴스를 만들땐 new키워드를 사용하며 생성자 함수가 실행, 변수에 클래스의 설계를 가진 새로운 객체인 인스턴스가 할당되는 과정으로 이루어진다.

인스턴스의 예)

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

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

이렇게 생성된 각각의 인스턴스는 클래스의 고유한 속성과 메소드를 가지게 된다.

속성과 메서드

클래스: 속성의 정의

---

클래스에서는 속성과 메소드를 정의, 이를 인스턴스에서 이용하며 이때 this 키워드를 사용한다. this키워드는 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context (execution context)로 new키워드로 인스턴스를 생성했을시 해당 인스턴스가 this의 값이 된다. 클래스에서 this는 인스턴스 객체를 의미한다. prameter로 넘어오는 값들은 인스턴스 생성 시 지정하는 값이며 만들어진 인스턴스에 해당 parameter값을 부여하겠다는 의미이다.

클래스 속성의 예)

//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키워드 사용시 바깥 범위인 lexical scope 에서 this를 찾게되기 때문에 메서드 호출 방식에는 화살표 함수를 쓰지 않는다.

클래스: 메소드의 정의

---

ES5는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있었다. 하지만 ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의할 수 있게 되었다.

클래스 메소드의 예)

//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() {
      //연료 공급을 구현하는 코드
    }
  	dirve() {
      //운전을 구현하는 코드
    }
}

//인스턴스에서의 사용
let avante = new Car ('hyundai','avante','black');
avante.color; // black
avante.drive(); // 아반떼가 운전을 시작합니다.