✅ 클래스(Class)와 인스턴스(Instance)
객체 지향 프로그래밍 패러다임을 따른다는 것은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그리고 그 청사진을 바탕으로 한 객체(object)를 만든다는 것을 의미한다. 하나의 모델이 되는 청사진, 바로 이것이 클래스(class)가 되는 것이고, 그 청사진을 따라 만들어진 것이 객체이면서 그 클래스의 인스턴스(instace)가 된다.
클래스(class)는 한마디로 말하자면 '틀'이라고 생각할 수 있다. 무언가를 만들 때, 그 만들 물건의 겉 모양을 미리 만들어놓고
그대로 찍어낼 수 있게 하는 "틀" 말이다. 간단하게 붕어빵을 만드는 모습을 생각해보자.
붕어빵을 만드는 행동을 코딩이 생각하고 대입시켜보면 아래와 같은 그림을 생각할 수 있을 것이다.
하나의 클래스를 가지고 여러개의 인스턴스를 만들 수 있다. 각각 만들어진 인스턴스들은 개별적인 요소를 갖지만, 공통된 클래스를 가졌다는 점에서 여러가지들을 공유할 수 있다.
✅ new 연산자 와 생성자 함수
객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 유사하나 객체를 여러 개 만들어야 할때가 생기곤 합니다.
복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우 그렇습니다.
이런 경우 'new' 연산자와 생성자와 유사한 객체 여러 개를 쉽게 만들 수 있습니다.
new 연산자
인스턴스를 만들 때에는 new 키워드를 사용합니다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당됩니다. 각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됩니다.
생성자 함수
1. 함수 이름의 첫 글자는 대문자로 시작한다.
2. 반드시 'new' 연산자를 붙여 실행한다.
예시)
생성자 함수는 두가지 버전이 있으나 우리는 뒤에 버전을 더 많이 사용한다.~!!
//ES5
function 이름(속성1, 속성2, 속성3){
}//ES6
Class 이름{
construct(속성1, 속성2, 속성3){
}
}
ES5와 ES6는 메소드를 정의하는 것에도 차이가 있다. 두개를 비교해보면 확실히 ES6가 간결해 보이고 사용하기 쉬워보인다.
//ES5
function 이름(속성1, 속성2, 속성3){
}
이름.prototype.함수이름 = function(){
}//ES6
Class 이름{
construct(속성1, 속성2, 속성3){
}
함수이름(){
}
}
아래의 세가지 용어는 오직 자바스크립트에서만 유효한 용어이다.
- prototype : 모델의 청사진을 만들때 쓰는 원형 객체(object form)이다.
- constructor : 인스턴스가 초기화될때 실행하는 생성자 함수
- this : 함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context(execution contest) new키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this값이 된다.
