[JavaScript] 클래스 단위 프로그래밍
Swimjiy
—August 18, 2018
1. 클래스 소개
만들어진 수많은 변수와 함수 중 연관 있는 변수와 함수만을 선별해 포장하는 기술, 클래스를 이용하여 객체 단위로 코드를 그룹화하고 코드를 재사용할 수 있다.
2. 클래스 관련 기본 개념과 용어 정리
- 인스턴스 : 클래스로 생성한 결과물 (ex. 클래스가 붕어빵 틀이면 인스턴스는 클래스라는 틀로 만든 붕어빵)
- 객체 : 인스턴스와 유사하게 클래스의 실체를 나타내는 용어. (ex. var 인스턴스 = new TabPanel(); 일 때, TabPanel 클래스의 객체 생성으로 해석 가능)
- 프로퍼티 : 클래스 내부에 만드는 변수
- 메서드 : 클래스 내부에 만드는 함수
3. 오브젝트 리터럴 방식
var 인스턴스 = {프로퍼티: 초기값,메서드1: function(){alert(this.프로퍼티1);this.메서드2();},메서드2: function(){},}인스턴스.프로퍼티;인스턴스.메서드;
오브젝트 리터럴 방식은 클래스를 정의함과 동시에 인스턴스를 생성함으로 추가적인 작업이 필요하지 않다. 그러나 다른 클래스와 다르게 인스턴스를 하나 이상 만들 수 없다는 것이 단점이기에 객체 단위로 코드를 재사용하기보다는 여러 개의 데이터를 묶어 값을 보관하거나 함수의 매개변수 값으로 전달할 때 주로 사용한다. 프로퍼티 구분은 세미콜론(;)이 아닌 콤마(,)라는 부분이 주의점이다.
4. 함수 방식
function 클래스이름(){this.프로퍼티=초기값;this.메서드1=function(){alert(this.프로퍼티);this.메서드2();}this.메서드2=function(){}}var 인스턴스=new 클래스이름(); //new가 함수 생성 키워드, 붙이지 않으면 일반 함수가 호출된다.인스턴스.메서드();
하나의 함수에 프로퍼티와 메서드를 정의하는 구조로, 프로퍼티와 메서드는 반드시 자기 자신을 나타내는 this에 정의해야 한다. 앞서 알아보았던 오브젝트 리터럴 방식과는 달리 매개변수 등을 추가하여 코드를 재사용할 수 있다는 점이 장점이다. 그러나 내부의 모든 메서드가 중복해서 생성된다는 단점이 있다. 겉모습만 보면 함수와 비슷한데 함수 이름은 소문자로 시작하고 클래스 이름은 대분자로 시작한다는 점을 알아두자.
5. 프로토타입 방식
function 클래스이름(){this.프로퍼티 = 초기값;}클래스이름.prototype.메서드1 = function(){alert(this.프로퍼티1);this.메서드2();}클래스이름.prototype.메서드2 = function(){}var 인스턴스 = new 클래스이름();인스턴스.메서드();
프로토타입 방식은 프로퍼티는 함수 방식처럼 this를 이용해서 정의하며 메서드는 prototype이라는 프로퍼티에 정의하는 구조로 되어 있다. 함수 방식 클래스와 동일하게 코드를 재사용할 수 있다는 특징과 함께 함수 방식 클래스의 단점을 해결하고 모든 인스턴스가 prototype에 만든 메서드를 공유해서 사용할 수 있다는 장점이 있다. 또한 prototype을 이용해 상속을 구현할 수 있다는 점이 있다. 일반적인 클래스 제작 방법이며 jQuery도 prototype 방식으로 만들어여 있다는 점이 흥미롭다.
결론
이상 세 가지 클래스 프로그래밍 방법에 대해 알아보았다. 객체 외부에서의 프로퍼티와 메서드 접근 방식은 서로 달랐지만 객체 내부에서의 접근 방식에서는 세 방식 모두 this 속성값을 쓴다는 특징이 있었다. 아직 실무에서는 사용해보지 않았지만 언젠가 사용할 날이 올 때 바로 쓸 수 있도록 열심히 공부해야겠다.