-
클래스: 인스턴스의 공통 속성을 모은 추상적인 개념
- 과일은 음식이라는 집단에 포함. 따라서 과일 클래스는 음식 클래스의 하위 클래스.
-
인스턴스: 클래스의 속성을 지니는 실존하는 객체
- 자몽, 사과, 귤 등은 과일이라는 집단에 속함. 여기서 과일은 ‘클래스’이고 자몽, 사과 귤 등은 클래스에 속하는 인스턴스들. 과일, 음식은 추상적인 개념이고 자몽, 사과, 귤 등은 눈으로 볼 수도 있고 만질 수도 있고 먹을 수도 있는 구체적인 물체.
-
현실에서는 인스턴스로 부터 공통점을 찾아 클래스를 정의되는 것과 달리 프로그래밍에서는 클래스가 먼저 정의되어야 공통적인 요소를 지니는 인스턴스를 생성할 수 있음.
- 먼저 object형식으로 붕어빵 하나를 만들어보자
var potBung = {
base : '밀가루';
flavor : '팥';
}
- 이 같은 형식으로 다양한 맛의 '새로운 붕어빵 object'를 만들어 볼까?
var potBung = {
base : '밀가루';
flavor : '팥';
}
var shooBung = {
base : '쌀가루';
flavor : '슈크림';
}
var pizzaBung = {
base : '튀김가루';
flavor : '피자';
}
- 여기서 potBung라는 객체에서 flavor를 선택하면 '팥'이 나온다. shooBung라는 객체에서 flavor를 선택하면 '슈크림'이 나간다. 이 같은 방식으로라면 데이터가 많아지면 많아지는 대로 재료를 일일이 적어줘야한다. (=하드코딩) 이렇게 비슷한 object를 많이 만들어야할 때, class문법을 사용하면 수고로움을 덜 수 있다.
- class라는 멋진 붕어빵 틀을 만들면 '밀가루와 팥'을 넣든, '쌀가루와 슈크림'을 넣든 붕어빵 모양으로 나온다. class는 object를 뽑아쓰는 틀!
:: ES5
function FishBunFrame(){
this.base = "밀가루";
this.flavor = "팥";
}
- class 생성자 함수는 일반함수와의 구분을 위해 보통 대문자로 시작
- this가 존재함으로해서 function은 class역할을 해줄 수 있음
- 여기서 this = 기계로 부터 새로 생성되는 object들. 즉 생성자 함수 자신. (= instance=인스턴스)
this.x = "밀가루";
// this.x = 새로 생성되는 object에 {x = '밀가루'} 를 추가해 줘
-
어떤 주문이 들어오든 같은 모양의 붕어빵을 뽑아내는 FishBunFrame가 만들어 졌다.
-
fishBunFrame를 통해 새로운 obect를 생성하고 싶을 때 주문법은 아래와 같다.
/* instance 생성 */
new FishBunFrame();
- new를 통해 this에 저장된 내용물을 객체에 적용한다.
- 다양한 변수에 새로운 객체를 할당 해보자.
var potBung = new FishBunFrame();
console.log(potBung); // FishBunFrame {base: "밀가루", flavor: "팥"}
var chouxBung = new FishBunFrame();
console.log(chouxBung) // FishBunFrame {base: "밀가루", flavor: "팥"}
- new 붕어빵 (object)가 만들어 졌지만, 재료가 전부 같다.
- 여기서 new 붕어빵(object)에 각기 다른 재료 (value)를 넣고 싶다면?
function FishBunFrame(a, b){
this.base = a;
this.flavor = b;
}
- FishBunFrame함수에 parameter를 사용하여 값을 받는다.
- parameter가 a, b 값을 받으면 원하는 value를 넣어 생성할 수 있다.
var potBung = new FishBunFrame('밀가루', '팥')
console.log(potBung) // fishBunFrame {base: "밀가루", flavor: "팥"}
var chouxBung = new FishBunFrame('쌀가루', '슈크림')
console.log(chouxBung) // fishBunFrame {base: "쌀가루", flavor: "슈크림"}