[JavaScript]클래스, 인스턴스

우리가 만약 붕어빵을 만든다면 보통 어떻게 만들것인가? 대부분은 붕어빵 기계(붕어빵 틀)에 반죽과 원하는 속을 넣어서 만들것이다. 이 붕어빵 기계가 있기 전에는 붕어빵을 만들려면 반죽을 일단 붕어 모양으로 손수 만들어야 됬을것이다. 매우 비효율적이고 시간 또한 많이 드든 방법일 것이다.
이와 마찬가지로 어떠한 비슷한 코드를 짜야할 때 어떤 틀어 넣고 찍어내면 어떨까? 라는 방식으로 만들어진 프로그래밍 패턴 이다.

1. 클래스

클래스는 예시에서 나온 붕어빵틀과 같은 방식이다.

//ES5
function 붕어빵 (반죽, 속){
    // 붕어빵이 만들어 질때 나오는 코드
    this.반죽 = 반죽;
    this.속 = 속;
}

//ES6
class 붕어빵 {
    constructor (반죽, 속){
    this.반죽 = 반죽;
    this.속 = 속;
    }
}

• this 는 class(붕어빵 틀)에 들어올 팥 붕어빵이나 슈크림 붕어빵 같이 그 틀에 들어올 내용의 반죽과 속을 가르키는 말이다.

그리고 이 class에는 속성 뿐만이 아닌 메소드도 정의 가능 하다.

//ES5
function 붕어빵 (반죽, 속){
    // 붕어빵이 만들어 질때 나오는 코드
    this.반죽 = 반죽;
    this.속 = 속;
}
붕어빵.prototype.굽기방법 = function(){
    // 양쪽을 몇번 구울것인가에 관한 코드
}

//ES6
class 붕어빵 {
    constructor (반죽, 속){
    this.반죽 = 반죽;
    this.속 = 속;
    }
    굽기방법(){
    // 양쪽을 몇번 구울것인가에 관한 코드
    }
}

• ES5의 경우 prototype을 통해 메서드 생성 가능.
• ES6의 경우 class내부에 생성 가능

2. 인스턴스

붕어빵 틀에 넣어서 만들고싶은 붕어빵을 인스턴스라고 한다.

//ES5
function 붕어빵 (반죽, 속){
    // 붕어빵이 만들어 질때 나오는 코드
    this.반죽 = 반죽;
    this.속 = 속;
}

//ES6
class 붕어빵 {
    constructor (반죽, 속){
    this.반죽 = 반죽;
    this.속 = 속;
    }
}

let 팥붕어빵 = new 붕어빵 ('기본반죽', '팥')
let 슈크림흑임자붕어빵 = new 붕어빵 ('흑임자반죽', '슈크림')
let 피자붕어빵 = new 붕어빵 ('기본반죽', '치즈')

console.log(팥붕어빵.반죽) // 기본반죽
console.log(슈크림흑임자붕어빵.반죽) // 흑임자반죽
console.log(피자붕어빵.속) // 치즈

• 인스턴스를 만들때는 new 키워드를 사용한다.

prototype	모델의 틀을 만들때 쓰는 원형 객체(originla form)
constructor	인스턴스가 초기화될 때 실행하는 생성자 함수
this	함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context(execution context)
	new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨.