헤맨 만큼 내 땅

Unit2 - [JS] Class 와 Instance 본문

Codestates 부트캠프/Section02 - TIL

Unit2 - [JS] Class 와 Instance

RachelLee 2022. 7. 22. 12:24

자바스크립트는 객체 지향 패턴으로 작성할 수 있다.

 

객체 지향 프로그래밍 OOP(Object-Oriented-Programming) ↔ 절차 지향 프로그래밍

: 데이터와 기능을 한 곳에 묶어서 처리

 

Class (ex 붕어빵을 제작하는 틀)

: 청사진(blueprint), template

 

Object (ex 붕어빵)   => instance

: 청사진을 바탕으로 객체를 만드는 프로그래밍 패턴

class 붕어빵 {
 constructor (밀가루종류,재료) 
}

 

Instance (ex 각각의 붕어빵 - 팥 붕어빵, 슈크림 붕어빵, 피자붕어빵 )

각각의 붕어빵을 만들기 위해서는

“붕어빵 틀”에 “붕어빵”을 만들어야 한다. → 인스턴트화 한다.

// 붕어빵이 만들어질 떄 =인스턴트가 만들어질 때
let 팥붕어빵 = new 붕어빵 ('일반밀가루','팥')
let 슈크림붕어빵 = new 붕어빵 ('통밀밀가루','슈크림')
let 피자붕어빵 = new 붕어빵 ('일반밀가루','치즈')

 

methiod (ex 굽는다 )

// 붕어빵 틀로 붕어빵을 만드려면 "구워야"한다.
class 붕어빵 {
 constructor (밀가루종류,재료) {...각각의 object}

 bake();
}

 

 

 

 


 

Codestates. unit 02 
예시) Class - Car 
         Instance - hyundai,  bmw

용어 정의
prototype 모델의 청사진을 만들 때 원형 객체 (original form)
constructor 인스턴트가 초기화될 떄 실행하는 생성자 함수
this 함수가 실행 될 때. 해당 scope마다 생성되는 고유한 실행 contect(execution context)
new키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 된다.

 

Class 문법을 이용하여 만든 코드

class Counter {
  constructor() {
    this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다
  }
  increase() {
    this.value++
  }
  decrease() {
    this.value--
  }
  getValue() {
    return this.value
  }
}

let counter1 = new Counter() // 생성자 호출
counter1.increase()
counter1.getValue() // 1