[JS] 클래스와 인스턴스

홍다희·2022년 7월 22일
0

클래스와 인스턴스

객체 지향 프로그래밍이란?
하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다.
즉, 청사진은 설계도를 뜻하고, 각각의 객체는 설계도를 바탕으로 만들어진 제품을 뜻한다.

  • 청사진 -> class 클래스
  • 청사진을 바탕으로 한 객체 -> instance 인스턴스(인스턴스 객체
    (instance object)의 줄임말)

클래스와 인스턴스 선언 방법

객체를 만드는 방법은 일반적인 함수를 정의할 때랑 똑같다.
ex)

function Car(Color){ }

그러나 함수를 이용할 땐 앞에 new 키워드를 붙여야 한다.
이는 새로운 인스턴스를 만드는 방법이다.
일반적인 다른 함수들과 구분하기 위해 클래스는 첫 글자를 대문자로 하고 동사가 아닌 일반명사로 만든다.
ex)

let avante = new Car('blue');

ES6에선 클래스를 만드는 문법이 추가돼서 function 대신 class 키워드를 선언할 수 있다.
ex)

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

여기서 보이는 함수는 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부른다. 또한 생성자 함수는 return 값을 만들지 않는다.

생성자 함수 특징

  • 생성자 함수는 하나만 가능
  • 인스턴스 객체를 생성하고 초기화하는 특별한 메서드
  • 생성자 함수를 작성하지 않으면, 기본 생성자(default constructor)가 제공되며, 기본(base) 클래스일 경우는 기본 생성자는 비어있으며, 파생(derived) 클래스일 경우 기본 생성자는 부모 생성자를 부름.
 let avante = new Car(‘hyundai’, ‘avante’, ‘black’);
 let mini = new Car(‘bmw’, ‘mini’, ‘white’);

위의 변수들에 인스턴스가 할당되고 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖는다.

ex) 자동차를 예로 든다면
속성 - 브랜드, 차 이름, 색상, 현재 연료 상태, 최고 속력
메서드(객체에 딸린 함수) - 연료 주입, 속력 설정, 운전

this라는 새로운 키워드가 나오는데, 이는 인스턴스 객체를 의미한다. this에 할당한다는 것은 새로 생긴 인스턴스에 매개변수를 할당하겠다는 것이다.

또한 메서드를 정의할 때도 ES5와 ES6의 방식이 다르다.
ES5는 메서드를 추가하려면

Car.prototype.drive = function(){
// 운전 코드
}

이런 식으로 prototype을 붙여야 했는데,
ES6는 클래스 이름과 프로토타입을 둘 다 붙이지 않고

drive() {
} 

이렇게만 추가하면 된다.

클래스와 인스턴스에 대해 처음 공부해 봤는데 ES6에서 많이 편리해졌다는 걸 깨달았다... 아직 헷갈리지만 예시를 보다 보면 이해할 수 있을 거 같다.

profile
프론트엔드 개발자

0개의 댓글