자바스크립트 클래스 만드는 방식

<자바스크립트에서 클래스를 만드는 방식의 종류>

기본적으로 리터럴 방식, 함수 방식, 프로토타입 방식이 있다.

자바스크립트에서는 클래스라는 개념을 제공하지 않지만 클래스처럼 사용이 가능하다.

 

<만든 클래스를 활용하기 위한 인스턴스 생성 방법>

자바에서 인스턴스 생성 시 new 클래스명(); 방식과 동일하다.

인스턴스가 만들어지면 클래스의 프로퍼티와 메서드에 접근이 가능하다.

 

<클래스 내부에서 프로퍼티와 메서드 접근 방법>

자신을 나타내는 this라는 속성으로 접근한다.

 

<클래스의 이점>

클래스 하나에 대한 여러 개의 인스턴스를 생성해서 독립적으로 동작하는 결과를 만들 수 있다.

 

<리터럴 방식>

프로퍼티는 콜론(:)을 기준으로 좌측에는 프로퍼티 이름, 우측에는 값을 작성하며

메서드도 콜론(:)을 기준으로 좌측에는 메서드 이름, 우측에는 함수 정의 부분을 작성한다.

리터럴 방식의 경우는 여러 개의 인스턴스를 생성할 수가 없다.

정의하는 순간 인스턴스가 자동으로 생성되기 때문.

인스턴스를 별도로 생성할 필요가 없다는 장점은 있지만 여러 개의 인스턴스를 생성할 수 없는 단점이 있다.

그렇기에 주 용도는 데이터를 포장하는 용도로 사용한다.

여러 개의 데이터를 묶어서 값을 보관하거나 호출하는 함수에 파라미터로 값을 전달할 때 주로 사용한다.

함수방식의 경우 파라미터가 많을 수록 위치에 맞게 값을 전달해야 되기 때문에 순서에 따른 잘못 된

데이터를 전달할 수 있지만 리터럴 방식은 위치에 상관 없이 여러 개의 데이터를 하나의 변수에 담아 보낼 수 있다는

장점이 있다.

 

결과는 같지만 다음과 같이 리터럴 방식을 활용하면 가독성이 좋고 코드가 간결하다.

 

<함수 방식>

함수 내부에 프로퍼티와 메서드를 정의하는 구조.

프로퍼티와 메서드는 자기 자신을 나타내는 this 속성을 활용하여 정의해야 한다.

암묵적인 규칙으로써 일반적으로 함수 이름은 소문자, 클래스 이름은 대문자로 명명규칙을 사용한다.

코드 재사용성의 장점을 가지고 있다.

하지만 함수 방식의 클래스는 생성하는 인스턴스의 개수에 따라 가지고 있는 값이 영향을 받을 수 있기

때문에 실무에서는 함수 방식의 클래스는 잘 활용하지 않는다.

 

<프로토타입 방식>

클래스를 만드는 방법 세가지 중 가장 많이 사용되고 있다.

jQuery 또한 프로토타입 방식으로 만들어진 클래스이다.

함수 방식과 동일하게 프로퍼티는 this 속성을 활용해서 정의하고 메서드는 prototype 이라는

프로퍼티에 정의하는 구조이다.

가장 큰 특징으로는 모든 인스턴스가 prototype에 만든 메서드를 공유해서 사용한다.

또한 자바스크립트에서는 prototype을 활용해 상속을 구현한다.

 

<프로토타입 방식의 생성자 정의>

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

생성자는 주로 프로퍼티 생성 및 객체 정보나 상태를 초기화하는 메서드를 호출하는 역할을 한다.