클래스와 인스턴스

클래스(Class)와 인스턴스(Instance)

객체 지향 프로그래밍 패러다임을 따른다는 것은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그리고 그 청사진을 바탕으로한 객체(object)를 만든다는 것을 의미한다. 하나의 모델이 되는 청사진, 바로 이것이 클래스(class)가 되는 것이고, 그 청사진을 따라 만들어진 것이 객체이면서 그 클래스의 인스턴스(instance)가 된다. 

 

클래스(class)는 말하자면 '틀'이라고 생각할 수 있다. 무언가를 만들 때, 그 만들 물건의 겉 모양을 미리 만들어놓고 그대로 찍어낼 수 있게 하는 '틀' 말이다. 

 

객쳉와 인스턴스 설명 사진

하나의 클래스를 가지고 여러개의 인스턴스를 만들 수 있다. 각각 만들어진 인스턴스들은 개별적인 요소(예: 색깔)를 갖지만, 공통된 클래스를 가졌다는 점에서 여러가지들(예: 별의 모양, 사이즈 등)을 공유할 수 있다. 

 

JS에서 클래스를 만드는 두가지 방법

자바스크립트에서 클래스를 만드는 방법은 크게 두가지가 있다. 첫번째는 ES6가 도입되기 이전에 사용하던 함수를 사용하는 방식이고, 두번째는 ES6 이후에 생긴 클래스 생성자를 이용한 방식이다. 두 방식 모두에서, 클래스를 만들땐 통상적으로 맨 앞글자를 대문자로 만든다 (예: Star). 클래스의 메소드를 만들 때, ES6 방식같은 경우 생성자 함수 안에 class 키워드로 함께 묶어서 작성한다. 

// 방법1: 함수를 사용한 방식
function Star(name, color, size) {
  this.name = name;
  this.color = color;
  this.size = size;
}
// 방법1의 메소드
function.prototype.twinkle = function() {
// 반짝
}

// 방법2: 클래스 생성자를 사용한 방식
class Star {
  constructor(name, color, size) {
    this.name = name;
    this.color = color;
    this.size = size;
  }
  
  // 방법2의 메소드
  twinkle() {
    //반짝
  }
}

 

인스턴스 만들기

만들어진 인스턴스는 Star 클래스의 속성과 메소드를 갖게 된다. 아래와 같이 코드를 작성한다면 반짝반짝거리는 별을 만들 수 있다.

// Star 클래스의 인스턴스, 반짝이는 별 만들기

let twinkleStar = new Star('Star', 'Yellow', 999999999999)


// Star 클래스의 메소드를 엄청나게 빛나는 별을 사용할 수 있다

twinkleStar.twinkle()

 

new 연산자와 생성자 함수

객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠.

'new'

 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다.

 

생성자 함수

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

1. 함수 이름의 첫 글자는 대문자로 시작합니다.
2. 반드시 'new' 연산자를 붙여 실행합니다.

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("보라");

alert(user.name); // 보라
alert(user.isAdmin); // false

new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작합니다.

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

예시를 이용해 new User(...)가 실행되면 무슨 일이 일어나는지 살펴 보도록 하겠습니다.

 

function User(name) {
  // this = {};  (빈 객체가 암시적으로 만들어짐)

  // 새로운 프로퍼티를 this에 추가함
  this.name = name;
  this.isAdmin = false;

  // return this;  (this가 암시적으로 반환됨)
}

이제 let user = new User("보라")는 아래 코드를 입력한 것과 동일하게 동작합니다.

 

let user = {
  name: "보라",
  isAdmin: false
};

 

요약

• 생성자 함수(짧게 줄여서 생성자)는 일반 함수입니다. 다만, 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 씁니다.
• 생성자 함수는 반드시 new 연산자와 함께 호출해야 합니다. new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됩니다.

생성자 함수는 유사한 객체를 여러 개 만들 때 유용합니다.

자바스크립트는 언어 차원에서 다양한 생성자 함수를 제공합니다. 날짜를 나타내는 데 쓰이는 Date, 집합(set)을 나타내는 데 쓰이는 Set 등의 내장 객체는 이런 생성자 함수를 이용해 만들 수 있습니다. 자세한 내용은 다시 살펴보도록 하겠습니다.

 

 

참조1 : https://seo-tory.tistory.com/47

[JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing)

참조2 : https://ko.javascript.info/constructor-new

new 연산자와 생성자 함수