[Javascript] 클래스와 인스턴스

wool·2022년 7월 22일

JavaScript

Javascript

목록 보기

5/10

객체 지향 프로그래밍?

객체지향 프로그래밍은 하나의 모델이 되는 청사진 즉 틀을 만들어 두고 그 만들어 둔 틀을 가지고 한 객체를 만드는 프로그래밍 패턴이다.

붕어빵을 예시로 들자면 붕어빵을 찍어내는 틀은 여러개지만 붕어빵 속을 바꿔가며 만들 수 있는데, 이 붕어빵 만드는 틀과 앙금이 바뀌면 다른 붕어빵이 되는 원리로 이해 할 수 있다.

클래스와 인스턴스

위 붕어빵 예시로 설명하자면 붕어빵을 만드는 틀이 class(클래스)가 되고 들어가는 요소에 따라 달라지는 붕어빵은 instances(인스턴스)라고 한다!

class

보통 대문자로 시작하며 일반명사로 만든다
객체는 일반적인 함수를 정의하듯 만든다
class로 만들어지는 함수는 생성자(constructor) 함수라고 부른다.

class 작성 방법

function ProteinPowder(taste) {  
		// instances가 만들어질 때 실행되는 코드가 들어감
}

최근 사용하고 있는 ES6(ECMAScript 6) 문법 class 키워드 작성방법

class ProteinPowder(taste) {
			constructor(a, b, c) {
					// instances가 만들어질 때 실행되는 코드가 들어감
			****}
}

💡 최근에는 ES6 방법을 주로 사용하고 있다.

instances

new라는 키워드를 이용하여 instances를 만든다.

instances 작성 방법

function ProteinPowder(taste) {   }

let chocolateProtein = new ProteinPowder("chocolate"); // 초코맛 프로틴
let strawberryProtein = new ProteinPowder("strawberry"); // 딸기맛 프로틴

**// 위 각각의 instances는 ProteinPowder라는 class의 고유한 속성과 메소드를 갖는다.**

this

객체지향 프로그래밍에서 빠지지 않고 등장하는 키워드이다

this는 instances의 객체를 의미한다.

parameter로 넘어온 인자들은 instances생성 시 지정하는 값이며 this로 할당한다는 것은 만들어진instances에 인자로 넘어온 값을 부여하겠다는 의미이다.

this 키워드 사용 예시

function ProteinPowder(taste) {   
		this.taste = chocolate;
}  
// => taste인자에 chocolate을 전달하겠다.

this 키워드 사용 예시

class ProteinPowder {
		constructor(taste)
			this.taste = chocolate;
		}
}
// => taste인자에 chocolate을 전달하겠다.

💡 최근에는 ES6 방법을 주로 사용하고 있다.

메소드 정의

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

function ProteinPowder(taste, percent) { ... }

ProteinPowder.prototype**.**shake = function() {
		// 프로틴파우더를 물에 타는 것을 구현하는 코드
}
ProteinPowder.prototype.drinkTimer = function() {
		// 프로틴을 언제 먹을지 알려주는 알람을 구현하는 코드
}

ES6에서의 메소드 정의 생성자 함수(constructor)와 함께 class키워드 안쪽에 묶어서 정의한다.

class ProteinPowder {
		constructor(taste, percent) { ... }

		shake() {
		// 프로틴파우더를 물에 타는 것을 구현하는 코드
		}

		drinkTimer() {
		// 프로틴을 언제 먹을지 알려주는 알람을 구현하는 코드
		}
}

instances에서의 메소드 사용

class ProteinPowder {
		constructor(taste, percent) { ... }

		shake() {
		// 프로틴파우더를 물에 타는 것을 구현하는 코드
		}

		drinkTimer() {
		// 프로틴을 언제 먹을지 알려주는 알람을 구현하는 코드
		}
}

let chocolateProtein = ProteinPowder('chocolate', '20g');
chocolateProtein.taste; // 'chocolate'
chocolateProtein.shake() // 초코프로틴파우더를 만든다.

let strawberryProtein = ProteinPowder('strawberry', '25g');
strawberryProtein.taste; // 'strawberry'
strawberryProtein.drinkTimer() // 딸기 프로틴 파우더를 마실 시간을 알려준다.

용어정리

prototype

모델의 청사진을 만들 때 쓰는 원형 객체
constructor

instances가 초기화 될 때 실행하는 생성자 함수
this

함수가 실행 될 때 해상 scope마다 생성되는 고유한 실행 context

new키워드로 instances를 생성했을 때에는 해당 instances가 바로 this의 값이 된다.