객체 지향 프로그래밍 (클래스와 인스턴스) in JS

- 객체 지향 프로그래밍 :  하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴

 

하나의 모델이 되는 청사진을 우리는 "class"
그것을 바탕으로한 객체는 "instance object (instance)" 라고 부른다.

 

[클래스]

클래스는 ES5 이후 , ES6 부터 사용되는 문법으로

생성자 함수로 만들었었지만, 이젠 class 키워드로 만드는 문법이다.

//ES5 문법
function Menu(category, name, price){
    // 인스턴스가 만들어질 때 실행되는 코드
    this.category = category;
    this.name = name;
    this.price = price;
 }
 
 //ES6문법
 class Menu{
 	constructor(category, name, price){
    // 인스턴스가 만들어질 때 실행되는 코드
    this.category = category;
    this.name = name;
    this.price = price;
    }
}

 

프로토타입 기반인 자바스크립트에 클래스가 추가되어 사용되어야 하는 이유가 뭘까?
- 자바스크립트는 프로토타입 기반이기 때문에 클래스 기반의 언어의 class 문법과 비슷하게 생겼지만, 내부동작까지 같지는 않다.
 프로토타입 기반으로 상속을 흉내낸 문법이다 (클래스 오브젝트를 만드는 것.)
 하지만, 이를 사용함으로써
 생성자 함수를 더 깔끔하게 사용이 가능하고,
  새로운 블록 스코프를 형성할 수 있다.

 

[this 키워드]
인스턴스의 객체를 의미, parameter로 넘어온 카테고리, 이름, 가격 >  인스턴스 생성 시 지정하는 값.
만들어지는 인스턴스에 위의 parameter를 부여한다는 의미. 
이 위의 parameter ( 카테고리, 이름 , 가격 )이 클래스를 구성하는 것인 클래스의 속성이다.

 

 

 

 

[클래스의 속성과 메소드]

//ES5
function Menu(category, name, price){
	// 인스턴스가 만들어질 때 실행되는 코드
}
Menu.prototype.recipe = function(){
	// 메뉴 만드는 방법을 구현
}
Menu.prototype.material = function(){
	// 메뉴의 재료를 파악하기 구현
}



//ES6
class Menu{
	constructor(category, name, price){
    // 인스턴스가 만들어질 때 실행되는 코드
    }
    recipe(){
    }
    material(){
    }
}

속성은 클래스를 구성하는 요소(category, name, price)

메소드는 인스턴스 객체에 내장될 함수(recipe, meterial)을 의미한다.

 

 

 

 

[인스턴스는 new 키워드를 사용하여 만들어진다.]

 

let strawberryjucie = new Menu('beverage', 'strawberry jucie', '3800');
let frenchToast = new Menu('bread', 'frenchToast', '4900');
let americano = new Menu('coffe', 'americano', '4500');

new 키워드를 사용, 또한 대문자로 시작하여 일반 명사로 주로 만든다. * 일반적 함수는 소문자로 시작, 동사를 포함하기도 한다.

new Menu 를 사용한 순간, 즉시 생성자 함수가 실행되며 변수에 클래스의 설계를 갖는 인스턴스가 할당된다.

 

 

 

 

* ES5 클래스 작성 문법과 ES6 작성문법 비교