클래스를 이해하기 위해 알고 있어야 하는 내용
- 함수 사용 이유를 알고 있는가? (코드 재사용성 때문에 사용)
- 지역변수, 전역변수 이해
- 매개변수 있는 함수 만들 수 있는가
- 리턴값이 있는 함수를 만들 수 있는가
- 중첩 함수 이해하고 있는가
- 콜백 함수 이해하고 있는가 (백에서 이벤트)
- 클로저를 이해하고 있는가
- 함수를 이용해 탭메뉴 구현 가능한가
클래스란?
함수가 특정 알고리즘을 포장하는 기술이라면, 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관있는 변수와 함수만을 선별해 포장하는 기술이다. 클래스로 포장하는 이유는 객체 단위로 코드를 그룹화 하고 코드의 재사용성을 위함이다.
클래스
1) 객체 단위의 코드 그룹화
2) 객체 단위의 중복 코드 제거 및 코드 재사용성
❗ 자바스크립트에서 클래스란
자바스크립트에서는 객체지향 프로그래밍에서 기본적으로 제공하는 클래스라는 개념을 제공하지 않는다.
그러나 클래스처럼 사용할 수 있는 방법을 세가지 지원한다. (리터럴 방식, 함수 방식, 프로토타입 방식)
❓ new라는 연산자로 메모리에 참조, 할당하는데 this는 new 연산자가 선언되면 활성화되어 this는 메모리 주소를 알고 있다. (클래스 내에서만 사용 가능)
기본개념 용어 정리
1. 인스턴스(instance)
클래스 사용하려면 일반적으로 인스턴스를 생성해야 한다. 인스턴스를 생성하지 않고 사용하는 클래스도 있지만 내용은 뒤에서 다룬다.
※ 객체는 인스턴스를 포함하는 일반적인 의미이다. (클래스 -인스턴스화-> 인스턴스(객체))
2. 객체 : 일반적으로 인스턴스와 동일한 의미로 해석된다. 범위적으로 좀 더 넓을 뿐이다.
3. 프로퍼티 : 클래스 내부에 만드는 변수를 프로퍼티라고 부르며 아울러 멤버변수라고도 한다.
4. 메서드 : 클래스 내부에 만드는 함수를 메서드라고 부르며 멤버함수(멤버메서드)라고도 한다.
자바스크립트의 클래스 사용 3가지 방법
1) 오브젝트 리터럴 방식
가장 간단한 방식, 클래스 설계 단계와 객체 사용 단계로 나누어 설명한다.
✅ 문법
var 인스턴스 변수 = {
프로퍼티: 초깃값, ...
메서드: function(){..}
...
}- 생성자 정의 방법 : 생성자는 인스턴스를 만들어주며 자동으로 호출되는 함수이다. ();
생성자의 주 용도는 프로퍼티의 초기화 역할을 담당한다. 그러나 리터럴 방식에서는 생성자가 존재하지 않는다. 정의함과 동시에 자동으로 인스턴스가 만들어진다.
객체 내부에서 자신의 프로퍼티와 메서드에 접근하려면 this라는 속성과 접근 연산자를 사용한다. this는 클래스 내부에 지역변수로 존재하며 인스턴스가 만들어질 때 비로소 활성화가 이루어지면서 해당 인스턴스의 주소를 가지고 있는 참조변수라고 생각하자.
2) 함수 방식
함수 방식 클래스의 경우 하나의 함수 내부에 프로퍼티와 메서드를 정의하는 구조이다. 프로퍼티와 메서드는 반드시 자기자신을 나타내는 this를 정의해야 한다. 인스턴스를 여러 개 만들 수 있는데, 인스턴스가 다른 인스턴스에게 영향을 주지 않는다. (독립적)
메모리 구조 정리하기
✅ 문법
function 클래스 이름() {
this.프로퍼티= 초깃값;
..
this.메서드= function(){..}
...
}
var 인스턴스 변수 = new 클래스 이름();또다른 참조를 하면 쓰레기 값이 생기는데 자바는 이걸 GC(쓰레기 콜렉터가) 치워주기 때문에 메모리가 깨끗해진다. C++에서는 소멸자로 치운다.
그러나 자바스크립트는 동적 할당에서 청소해주는 것이 없다. 그래서 프로토타입 방식이 등장하게 된 것이다.
자바 등의 객체 지향 프로그래밍 언어에서 Class로 정의되어 있지만 자바스크립트에서는 Class가 정의되어 있지 않으므로, 관례적으로 함수이름은 소문자로 시작하고 클래스이름은 대문자로 시작하는 걸로 함수와 클래스를 구분한다. (자바스크립트는 타입에 취약하다.)
❗ 클래스 이름()에서 ()는 생성자를 호출하는 것이다!
사실 단점이 그렇게 치명적이지 않음ㅋㅋ (하드웨어가 발달해서) 자바에서는 주로 이 함수 방식으로 선언한다.
3) 프로토타입 방식
가장 강력한 방법, JQuery 역시 프로토타입으로 만들어진 클래스이다. 프로토타입이라는 뜻은 원형이라는 뜻이다.
✅ 문법
function 클래스 이름() {
this.프로퍼티= 초깃값;
...
}
클래스이름.prototype.메서드=function(){...} //메서드를 외부에서 prototype이라는 곳에 만들어준다는 점이 함수 방식과 다르다.
var 인스턴스 변수 = new 클래스이름();
상속을 구현한다는 점이(객체 지향 프로그래밍)에서는 매우 중요하다!
클래스 정의 방식 3가지 비교
