JavaScript의 class

✅ 자바스크립트에 class가 추가되기 전 !!! ES6 이전 !!!

 

함수 : 함수기반 단위

- 포장 : 특정 기능을 하는 변수+ 알고리즘

- 기능 : 기능 단위의 코드 그룹화, 기능 단위의 중복 코드 제거, 코드 재사용성

 

클래스 (생성자 함수) : 클래스 기반 단위

- 포장 :  연관 있는 변수와 함수 포장

- 기능 :  객체 단위로 변수와 함수를 그룹화, 객체 단위의 중복 코드 제거, 코드 재사용

 

 

자바스크립트에서 클래스 만들기

- 사실 자바스크립에는 객체지향 프로그래밍 언어에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않는다.

- `생성자 함수`가 다른 언어에서의 클래스(Class)와 유사한 개념이기 때문에 클래스를 사용할 수 있는 방법이 있다.

그렇기 때문에 자바스크립트에서는 클래스는 없지만 OOP와 같이 비슷하게 사용할 수 있는 문법이 존재한다.

 

 

1. 리터럴 방식

 

var 인스턴스 = {
  프로퍼티1 : 초기값,
  프로퍼티2 : 초기값,
  메서드1 : function() {
  },
  메서드2 : function() {
  }
}

 

2. 함수 방식

 

function 클래스이름() {
  this.프로퍼티1 = 초기값;
  this.프로퍼티2 = 초기값;  
  this.메서드1 = function() {  
  }
  this.메서드2 = function() {  
  }
}

var 인스턴스 = new 클래스이름(); 

 

3. 프로토타입 방식

 

function 클래스이름() {
  this.프로퍼티1 = 초기값;
  this.프로퍼티2 = 초기값;
}

클래스이름.prototype.메서드1 = function() {
}

클래스이름.prototype.메서드2 = function() {
}

 

 

** 인스턴스

var 인스턴스 = new 클래스 이름(); // new 키워드를 사용

 

**객체

객체(Object)란?

객체는 인스턴스의 또 다른 이름이고 그때그때 상황에 따라 인스턴스 또는 객체라고 부르고 있습니다.

인스턴스는 주로 new 연산자를 이용하여 클래스의 실체를 생성할 때 사용하고 이 외에 클래스에서 제공하는 프로퍼티와 메서드를 사용한다고 했을 때의 경우를 객체라고 말합니다.

 

그리고 프로퍼티는 클래스 내부에 만드는(포장하는) 변수를 프로퍼티라고 부르며 멤버 변수라고도 합니다.

메서드는 클래스에 만드는(포장하는) 함수들을 메서드라고 부르며 멤버 함수라고도 부릅니다.

메서드는 주로 객체의 프로퍼티 값을 변경하거나 알아내는 기능과 클래스를 대표하는 기능이 담기게 됩니다.

 

 

✅ class 추가된 이후 !! ES6 이후 !!

 

이를 기반으로 ES6에서 class문법이 추가되었다. 기존의 프로토타입 기반으로 class를 만드는 것보다 훨씬 명료해짐

 

정적 메서드 - static methods는 클래스의 인스턴스 없이 호출이 가능하다

 

 

---

 

+) 추가 class 사용법 익히기 ↓

[JavaScript 강의 노트(2)] class