[JavaScript] 자바스크립트 클래스 (1)

클래스의 개념은 자바를 해봤다면 알고 있을 것이다.

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

하지만 자바스크립트에서는 클래스처럼 사용할 수 있는 방법을 세가지 지원한다.

이 세가지 방법은 클래스에 관한 개념을 정리한 후에 맨아래 부분 정리해 둔다. 

※ 함수와 클래스 비교

함수 - 특정 기능을 하는 변수와 구문으로 이루어져 있다.

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

클래스 - 연관 있는 변수와 함수로 구성되어 있다.

             객체 단위의 코드 그룹화, 객체 단위의 중복 코드 제거 및 코드 재사용

※ 객체 단위의 코드 그룹화?

 - 위에서 클래스는 연관 있는 변수와 함수로 구성되어 있다고 했다.

 - 이런식으로 객체 단위로 함수와 변수를 구분해서 코드를 작성하면 필요한 함수들이 찾기 편해지고 객체단위의 코드 재사용 및 중복코드를 제거할 수 있다.

※ 클래스 관련 기본 개념 및 용어정리

1. 인스턴스 - 객체를 의미한다. ex) 붕어빵 틀 = 클래스 , 붕어빵 = 인스턴스(또는 객체)
2. 프로퍼티 - 클래스 내부에 만드는(포장하는) 변수를 의미, 멤버변수라고도 한다. 

                           객체 내부에서 사용하는 정보, 객체 내부 함수(메서드)에서 처리한 결과값 저장

3. 메서드 - 클래스에 만드는(포장하는) 함수를 의미, 멤버함수라고도 한다.

                       주로 객체 프로퍼티 값 변경 및 탐색, 클래스 대표 기능등이 담기게 된다.

4. 생성자 - 인스턴스가 만들어지면서 자동으로 호출되는 함수

                       주 용도는 프로퍼티 초기화 역할

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

 - 총 3가지 방법이 있으며 각각 리터럴 방식 / 함수 방식 / 프로토타입 방식이 있다.

1. 오브젝트 리터럴 방식으로 클래스 만들기

var 인스턴스 = {

     프로퍼티 : 초기값,

          ...

     메서드 : function(){

          ...

     }

     ...

}

** 생성자는 리터럴 방식에서는 존재하지 않는다.

ex) //클래스 정의 및 인스턴스 생성

    var user = {

         name : "taehee",

         age : 20,

         showInfo : function(){

              //객체 내부에서 자신의 프로퍼티에 접근(this)

              document.write("이름 : " + this.name + " 나이 " + this.age); 

         }

         CallShowInfo : function(){

              //객체 내부에서 자신의 메서드에 접근(this)

              this.showInfo(); 

         }

    }

    //메서드 접근

    user.showInfo();

    //프로퍼티 접근

    var userAge = user.age;

오브젝트 리터럴 방식의 특징

1. 인스턴스를 여러개 만들 수 없다 - 정의함과 동시에 변수에 인스턴스가 자동으로 저장되기 떄문에 인스턴스를 만드는 구문을 작성 하지 않아도 되지만 인스턴스를 여러개 만들 수 없다.
2. 주 용도는 여러개의 데이터 포장용 - 인스턴스를 여러개 만들 수 없기 때문에 코드 재사용을 위해 사용하기 보단 여러개의 데이터를 묶어 값을 보관하거나 함수의 매개변수(파라미터) 값으로 전달할 때 주로 사용 ( 주로 json형태로 데이터를 생성하여 변수에 보관할 때 사용하는 듯 )

---

2. 함수 방식으로 클래스 만들기

function 클래스이름() {

    this.프로퍼티1 = 초기값;

    this.프로퍼티2 = 초기값;

    ...

    this.메서드 = function(){

        ...

    }

    ...

}

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

** 생성자는 클래스이름 자체가 생성자이며 인스턴스가 생성될 때 자동 호출된다.

ex) //클래스 정의

    function User(){

    this.name = "taehee";

    this.age = 20;

    this.showInfo = function(){

        document.write("이름 : " + this.name + " 나이 " + this.age); 

    }

    //인스턴스 생성

    var user = new User();

    //메서드 호출

    user.showInfo

       //프로퍼티 호출

       var userName = user.name;

}

함수 방식의 특징

1. 객체지향 프로그래밍 언어의 경우 class 클래스이름 { 프로퍼티와 메서드 } 의 형태로 클래스를 정의하지만 자바스크립트는 클래스를 만드는 키워드가 따로 없다. 그렇기 때문에 일반 함수와 함수 방식의 클래스의 경우 형태가 같다. 하지만 함수의 경우 일반적으로 소문자로 시작하고 클래스의 경우 일반적으로 대문자로 시작한다. 그렇기 때문에 클래스 작성시 특별한 경우를 제외하곤 클래스 이름은 대문자로 시작해야 한다.
2. 코드 재사용 가능 - 하나의 클래스로 여러개의 객체 생성 가능.

          ex) var userInfo1 = new User(); 

               var userInfo2 = new User(); 

               var userInfo3 = new User();

3. 메서드가 중복돼서 생성 - 위의 useInfo1,2,3 모든 인스턴스의 내부의 메서드가 독립적으로 만들어지기 때문에 똑같은 메서드를 세 인스턴스가 모두 중복되어 생성된다는 단점을 가지고 있다.

---

3. 프로토타입 방식으로 클래스 만들기

function 클래스이름(){

    this.프로퍼티1 = 초기값;

    this.프로퍼티2 = 초기값;

    ...

}

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

    ...

}

** 생성자는 함수 방식과 마찬가지로 클래스이름 자체가 생성자이며 인스턴스가 생성될 때 자동 호출된다.

** 프로토 타입은 프로퍼티는 함수에 메서드는 prototype이라는 프로퍼티에 정의 하는 구조

ex) //클래스 생성자

     function User(){

        this.name = "taehee";

    this.age = 20

    } 

    

    //메서드 정의    

    User.prototype.showInfo = function(){

        document.write("이름 : " + this.name + " 나이 " + this.age); 

    }

    //인스턴스 생성

    var user = new User();

    //메서드 호출

    user.showInfo();

    //프로퍼티 호출

    var userName = user.name;

프로토타입 방식의 특징

1. 코드 재사용 가능 - 하나의 클래스로 여러개의 객체 생성 가능.

          ex) var userInfo1 = new User(); 

               var userInfo2 = new User(); 

               var userInfo3 = new User();

2. 메서드 공유 가능 - 모든 인스턴스가 prototype에 만든 메서드를 공유하여 사용하기 때문에 메서드 중복 생성을 막을 수 있다.
3. 상속 기능이 있다.

---

※ 클래스 정의 방법의 비교

리터럴 방식 

 - 주 용도는 클래스를 만드는 용도는 아니다. 

 - 주로 여러개의 매개변수를 그룹으로 묶어 함수의 매개변수(파라미터)로 보낼 때 사용. 즉 대량의 변수전달이 주 용도. 

 - 하지만 정의와 함께 인스턴스가 생성되는 장점이 있으므로 하나의 간단한 클래스만 필요할 때는 리터럴 방식으로 클래스를 생성하는   게 효과적일 수 있다.

함수 방식

 - 간단한 클래스 제작 시 사용. 

 - 인스턴스마다 메서드가 독립적으로 만들어지는 단점이 있음.

프로토타입 방식

 - 일반적인 클래스 제작 방법

 - 인스턴스마다 공통된 메서드를 공유하여 사용하는 장점이 있음.

 - jQuery도 이 방식으로 만들어져 있음.