[JS] 클래스와 인스턴스

Growing_dev·2022년 9월 21일
0

JS

목록 보기
2/4

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

Class

실무에선 사용자나 물건같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 잦습니다.

이럴 때 new 연산자와 생성자 함수에서 배운 new function을 사용할 수 있습니다.

여기에 더하여 모던 자바스크립트에 도입된 클래스(class)라는 문법을 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있습니다.

기본 문법
클래스는 다음과 같은 기본 문법을 사용해 만들 수 있습니다.

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

이렇게 클래스를 만들고, new MyClass()를 호출하면 내부에서 정의한 메서드가 들어 있는 객체가 생성됩니다.

객체의 기본 상태를 설정해주는 생성자 메서드 constructor()는 new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화 할 수 있습니다.

Instance

new 연산자를 이용해 객체타입의 인스턴스를 생성합니다.
즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당됩니다.

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

생성자 함수

생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다.

함수 이름의 첫 글자는 대문자로 시작합니다.
반드시 'new' 연산자를 붙여 실행합니다.
new Car(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작합니다.

빈 객체를 만들어 this에 할당합니다.
함수 본문을 실행합니다. this에 새로운 프로퍼티를 추가해 this를 수정합니다.
this를 반환합니다.

ES6문법과 ES5문법

클래스를 만드는 새로운 문법이 ES6(ECMAScript 6, 비교적 최근 자바스크립트 문법입니다)에 도입되었습니다. 바로 class 키워드입니다.
최근에는 ES6 방법을 주로 사용합니다.

여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부릅니다. 인스턴스가 만들어질 때 실행되는 코드입니다.

profile
github ( https://github.com/sktjgudals ) gitlab ( https://gitlab.com/sktjgudals10 )

0개의 댓글