프론트엔드/자바스크립트

클래스와 인스턴스

테오구 2021. 10. 5. 10:45
728x90

객체 지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는  프로그래밍입니다.

 

가령 커피를 만든다고 가정해 봅시다. 가장 먼저 해줘야 할 일은 원두를 갈아주어야 하는 거겠죠?

 

원두를 갈아주는 패턴(class)을 만들어주고 물을 넣어주는 패턴을 넣어주면 아메리카노를 만들어주는 기계(instance)가 탄생합니다.

 

또한 원두를 갈아주는 패턴에 우유를 넣어주는 패턴을 넣어주면 카페라떼를 만들어주는 기계가 탄생하게 됩니다.

 

이처럼 객체지향을 이용하면 재사용성이 높아집니다.

 

ES5

function coffeeMaker(shots){
// 인스턴스가 만들어질 때 실행되는 코드
}

 

ES6

class coffeeMaker{
constructor(shots){
this.shot = shot
}
// 인스턴스가 만들어질 때 실행되는 코드
}

let coffee = new grindBeen(1);

 

속성과 메소드

예를 들어 coffeeMaker의 속성은 shot의 수 입니다.

 

메소드는 쉽게 말해 "객체에 딸린 함수"입니다. grind,물을 넣어주는 water, 우유를 넣어주는 milk 함수가 있을 수 있습니다. 

 

this 바인딩

this는 인스턴스 객체를 의미하며 parameter로 넘어온  shot은 인스턴스 생성시 지정하는 값이며 위에서와 같이 만들어진 인스턴스에 해당 브랜드. 이름. 색상을 부여하겠다는 의미

 

메소드

ES5

function coffeeMaker(shots){
// 인스턴스가 만들어질 때 실행되는 코드

Car.prototype.grind = function(){
// 연료 공급을 구현하는 코드
}

}

ES5는 prototype이라는 키워드를 사용해야 메소드를 정의할 수 있습니다. Car클래스에 메소드를 추가하기 위해서는 

prototype을 이용해야합니다. 

 

 

ES6

class coffeeMaker{
constructor(shots){
this.shot = shot
}
// 인스턴스가 만들어질 때 실행되는 코드

grind(){
}
}

let coffee = new grindBeen(1);

ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의합니다.

grind(){}와 같이 작성됩니다.

 

인스턴스에서의 사용

let coffee = new coffeeMaker(1);
coffee.grind; // 1

 

728x90

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

논리 연산자  (0) 2021.10.15
foreach, for in, for of  (0) 2021.10.09
고차함수  (0) 2021.09.13
DOM  (0) 2021.09.10
Spread/Rest 문법  (0) 2021.09.09