자바스크립트 클래스 패턴 ( 오브젝트 리터럴, 함수형, 프로토타입 방식 )

제목에서도 적어 놨듯이 자바스크립트에서 클래스 패턴을 크게 3가지 알아 보려고한다!

처음 디자인 패턴을 볼 때 인터넷에 있는 글을 프린트 해서 읽었었는데..정말 하나도 이해 못했었다...

두번째 시도로 책을 읽고 공부한 것을 바탕으로 글을 쓰려고한다.

클래스 만드는 방법은 크게 오브젝트 리터럴 방식, 함수형 방식, 프로토타입 방식으로 총 3가지로 설명한다. 첫번째로 오브젝트 리터럴 방식부터 소개하겠다.

var 인스터스 = {
 
    프로퍼티: 초깃값,
 
    메서드: function(){
    
    }
}

리터럴 방식은 객체 리터럴의 의미하는 { } 내부에 프로퍼티와 메서드를 정의하는 구조다.

변수나 메서드를 만들때 ' : '을 사용하며 끝에는 세미콜론이 아닌 콤마( , )로 구분하니 주의 해야한다.

리터럴 방식은 클래스를 위와 같이 정의함과 동시에 자동으로 인스턴스가 만들어진다 !

따라서 간단하긴 하지만 인스턴스를 하나 이상 만들 수 없다. ( 자바에서 무명객체 같은 느낌이었다.. )

이러한 특징때문에 주로 여러 개의 데이터를 묶어 값을 보관하거나 함수를 매개변수 값으로 전달 할때 사용한다.

---

두번째로 함수 방식의 클래스다.

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

위의 문법에서 알수있다시피 프로퍼티와 메서드는 반드시 자기 자신을 나타내는 this에 정의 해야한다.

그리고 객체지향 언어를 공부했다면 알겠지만 클래스명은 "대문자"로 시작해야한다.

( 일반 함수와 같은 문법이므로 대소문자를 사용해 함수인지 클래스인지 구별한다. )

인스턴스는 var 인스턴스 = new 클래스명( ); 으로 생성한다.

함수형은 리터럴 방식과 달리 코드 재사용이 가능하다.

하지만 메서드가 중복해서 생성되는 단점이 있다. 예를 들어 같은 클래스를 3가지 만든다고 가정해보겠다. ( var a = new Class( ); var b = new Class( ); var c = new Class( ); )

이런 경우 같은 클래스를 생성했으니 같은 메서드를 사용할텐데 이 때 메서드가 객체마다 중복해서 만들어 진다.

---

마지막으로 프로토타입 방식이다.

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

문법을 보면 함수형이과 다르게 메소드가 밖으로 나왔다 !

이렇게 사용함으로써 함수형의 단점이던 메서드 중복 형식이 프로토타입 방식에서는 메서드가 "공유"된다.

.

.

끝!