Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 네트워크
- 한빛미디어
- UX
- 혼공학습단
- HTTP와HTTPS차이점
- GUI
- 혼공시리즈
- 혼자공부하는네트워크
- 자바스크립트문자열출력하기
- 혼자공부하는
- 혼공네트
- https
- user flow
- 혼자공부하는얄팍한코딩지식
- column grid system
- 피터모빌의벌집모형
- 혼자서공부하는
- 제이콥닐슨 사용성평가기준
- 혼공얄코
- HTTP메시지구조
- 혼공학습단11기
- 이더넷허브
- HTTP
- 사이드이펙
- 2024년회고
- 혼자서공부하는네트워크
- 혼공네트워크
- UI
- 프로그래머스문자열출력하기
- 혼자서공부하는얄팍한코딩지식
Archives
- Today
- Total
헤맨 만큼 내 땅
Unit2 - [JS] Class 와 Instance 본문
자바스크립트는 객체 지향 패턴으로 작성할 수 있다.
객체 지향 프로그래밍 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
'Codestates 부트캠프 > Section02 - TIL' 카테고리의 다른 글
Unit2 - [JS] Prototype 프로토타입 (0) | 2022.07.22 |
---|---|
Unit2 - [JS] 객체 지향 프로그래밍 (0) | 2022.07.22 |