[JavaScript]-클래스와 인스턴스

"처음 접하는 개념이라서 아직 정확하게 이해하지 못 한 개념들이지만 현재 알고 있는 것을 글로 작성해보는 1차 정리 노트 정도로 생각해 주시면 좋겠습니다!"

 

클래스와 인스턴스는 객체 지향 프로그래밍에서 중요한 개념입니다.

 

객체 지향 프로그래밍은 실제 세계에 존재하는 것을 모델링하여 프로그래밍하는 방법이라고 할 수 있습니다. 그래서 객체 지향 프로그래밍에서는 데이터와 절차를 하나의 덩어리로 묶어서 생각합니다.

칼집과 칼을 만들 때 서로 다른 곳에서 만들어지는 것이 아니라, 한 군데에 모여 있는 것이죠. 왜냐하면 칼과 칼집은 기능적으로 연관이 있기 때문입니다.

 

클래스와 인스턴스는 대량 생산을 위한 틀을 만드는 과정이라고 생각하시면 좋습니다.

쉽게 비유하자면, 객체 지향 프로그래밍의 핵심은 철로 된 검을 여러 개 만들기 위해서 거푸집을 만드는 것이라고 이해할 수 있습니다.

우리가 떠올릴 수 있는 기본적인 검의 형태를 처음부터 설정해놓는 것이죠. 하지만 이 거푸집은 조금 특별한 거푸집이라서, 만들고 싶은 검의 형태나 성질을 조금씩 바꿀 수 있는 신기한 거푸집입니다. 기본적인 형태보다 조금 더 길거나 짧게, 검의 끝을 더 날카롭거나 뭉툭하게, 검의 전체적인 모양이 직선에 가깝게 혹은 약간 휘어져있게 만들 수 있는 것이죠.

이러한 형태나 날카로움 정도, 휘어짐 정도 등이 바로 '속성'입니다.

 

더 나아가, 이 거푸집은 만들어질 검에 '행위나 기술'도 부여할 수 있습니다. 

칼을 다루는 기술을 칼을 잡기만 해도 바로 사용할 수 있게 만든다고 생각할 수 있습니다.

이 때 검에 부여되는 행위나 기술이 바로 '메서드'입니다.

 

이 신기한 거푸집이 바로 클래스에 해당하고, 형태나 성질, 능력이 조금씩 바뀐 검들이 인스턴스에 해당합니다.

1. 거푸집 만들기(클래스 만들기)

//ES5에서 클래스 만들기 -> 함수로 정의//
function Sword(length, sharpness, curvature) {

//인스턴스가 만들어질 때 실행되는 코드//
}

//ES6에서 클래스 만들기 ->class라는 키워드로 정의할 수 있음//
class Sword {
	constructor(length, sharpness, curvature) {
//인스턴스가 만들어질 때 실행되는 코드//
	}
}

//ES6가 신규 문법이기 때문에 이 방법을 주로 사용합니다.//

클래스를 만들 때는 일반적인 다른 함수와 구분하기 위해 첫 글자를 대문자로 씁니다.

2. 거푸집으로 검 만들기(클래스를 활용해 인스턴스 만들기)

let longSword = new Sword('long', 'sharp', 'straight');
//길고 날카로운 검//
let dagger = new Sword('short', 'sharp', 'straight');
//짧고 날카로운 검//
let mace = new Sword('long', 'blunt', 'circular');
//길고 뭉툭한 철퇴//

인스턴스를 만들 때는 new라는 키워드를 사용해 만듭니다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체(인스턴스)를 할당합니다.

 

위 예시에서 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됩니다.

 

3. 검의 속성 정의(클래스 속성 정의)

//ES5에서 클래스의 속성 정의//
function Sword(length, sharpness, curvature) {
	this.length = long;
    this.sharpness = sharp;
    this.curvature = straight;
}

//ES6에서 클래스의 속성 정의//
class Sword {
	constructor(length, sharpness, curvature) {
    	this.length = long;
    	this.sharpness = sharp;
    	this.curvature = straight;
    }
}

this는 깊게 알아볼 것이 많지만 지금은 this가 인스턴스 객체이고, parameter로 넘어온 검의 길이와 날카로움 정도, 휘어짐 정도 등의 속성을 인스턴스 생성 시 지정하는 값이라고 이해하고 넘어가겠습니다.

위의 예시 코드는 this를 활용해 새로 만들어질 인스턴스에 해당 속성을 적용하겠다는 의미입니다.

 

4. 검에 행위나 기술 부여하기(메서드의 정의)

//ES5에서 메서드의 정의//
function Sword(length, sharpness, curvature) { /* 생략 */ }

Sword.prototype.attack = function() {
	//검을 사용해 공격하는 기술을 구현하는 코드//
}

Sword.prototype.guard = function() {
	//검을 사용해 방어하는 기술을 구현하는 코드
}

//ES6에서 메서드의 정의//
class Sword {
	constructor(length, sharpness, curvature) { /* 생략 */ }
    
    attack() { //공격 기술 코드//
    }
    
    guard() { //방어 기술 코드//
    }
}

ES5에서는 prototype이라는 키워드를 사용해야 메서드를 정의할 수 있습니다.

프로토타입에 대해서는 추후에 자세히 다루고, 지금은 메서드를 정의하는 방법으로만 이해하고 넘어가겠습니다.

ES6에서는 생성자 함수를 사용해 class 키워드 안쪽에 묶어서 정의합니다. (attack() {}, guard() {} 부분)

 

5. 만들어진 검을 사용하는 법(인스턴스에서 속성과 메서드 사용)

let longSword = new Sword('long', 'sharp', 'straight');
longSword.length; //'long'
longSword.attack(); //공격 기술 사용

let dagger = new Sword('short', 'sharp', 'straight');
dagger.sharpness; //'sharp'
dagger.guard(); //방어 기술 사용

prototype과 생성자 함수, this

프로토타입과 생성자 함수, this는 모두 더 깊게 알아볼 부분이 많은 개념들입니다. 하지만 이 글에서는 위 표에 나오는 정도로만 이해하고 다음에 다시 다루겠습니다.