OOP 공부 목표(객체 지향 프로그래밍)
클래스 개념 이해 / 인스턴스 개념 이해
- new 사용법
- class 사용법
- 추상화 / 현실을 바탕으로 메소드, 속성 디자인
OOP(객체 지향 프로그래밍)
- 다형성
- 캡슐화
- 상속
- 추상화
프로토 타입 개념 이해
상속 개념 이해
- 클래스 상속 원리 이해
- Prototype chain 이해
- 상속 관계 현실 세계 모델을 코드로 작성
Class 모듈화
앞서 필요한 개념
객체 개념 // 클로저 개념 // 객체 다루기
메소드 호출 실습하기
메소드 호출 방식에서는 화살표 함수
를 쓰지 않습니다. 이유는 mdn을 잠초
let makeModule = {
value1 : 1,
add : function() {
this.value1++;
},
minus: function() {
this.value1--;
},
mutiplication: function() {
this.value1 * 2;
}
}
makeModule.add() // 2
makeModule.minus() // 1
makeModule.mutiplication() // 2
makeModule.mutiplication() // 4
클로저 이용해 객체 생성
function makeModule () {
return {
value1 : 1,
add : function() {
this.value1++;
},
minus: function() {
this.value1--;
},
mutiplication: function() {
this.value1 * 2;
}
}
}
let module1 = makeModule()
module1.add() // 2
module1.minus() // 1
let module2 = makeModule()
module2.mutiplication() // 2
module2.add() // 3
module2.mutiplication() // 6
module1 과 module2는 서로 영향을 미치지 않는다.
Class VS 인스턴스
제일 설명하기 좋은 모델은 붕어빵이라고 생각합니다.
Class
: 붕어빵을 만드는 모든 기계 // 붕어빵 틀, 가스레인지 등등인스턴스
: 슈크림 붕아빵, 팥 붕어빵, 미니 붕어빵 등등
//클래스
function FishBread (앙금) {
}
// 인스턴스
let chouBread = new FishBread(chou); // 슈크림 붕어빵
let redbeanBread = new FishBread(redbean) // 팥 붕어빵
let miniBread = new FishBread(mini) // 미니 붕어빵
ES6에서는 class라는 키워드로 정의할 수도 있다.
class FishBread {
constructor (앙금, 이름, 가격) {
// 인스턴스 만들시 실행도는 코드
}
}
let chouBread = new FishBread(chou, '슈크림 붕어빵', 1500); // 슈크림 붕어빵
let redbeanBread = new FishBread(redbean, '팥 붕어빵', 1000) // 팥 붕어빵
let miniBread = new FishBread(mini, '미니 붕어빵', 500) // 미니 붕어빵
constructor
- 생성자라고 하며 생성자는
return
을 해주지 않는다. - 인스턴스가 초기화 될 시 실행되는 생성자 함수
이렇게 생성된 인스턴스는
Class FishBread
의 속성과 메소드를 갖는다.속성
: 앙금, 이름, 가격 등등 // 하나를 만들기 위해 필요한 재료메소드
: 틀모양, 불세기, 굽는 시간 등등 // 어떤 붕어빵이든 모든 다 적용됨
this
class FishBread {
constructor(앙금, 이름, 가격) {
// 인스턴스의 앙금 객체 = 인스턴스의 파라미터 앙금
this.앙금 = 앙금;
// 인스턴스의 이름 객체 = 인스턴스의 파라미터 이름
this.이름 = 이름;
// 인스턴스의 가격 객체 = 인스턴스의 파라미터 가격
this.가격 = 가격;
}
}
ES6 를 공부하다보면 항상 this
란 녀석이 등장한다.
this
: 간단히 설명하자면 인스턴스의 객체를 의미한다.
파라미터로 넘어온 값을 인스턴스 생성시 지정하는 defualt 값이며, 만들어진 인스턴스에 앙금, 이름, 가격을 만들어주는 변수를 선언해 준 것이다!
OOP(객체 지향 프로그래밍)
Class
의 구성 요소로는 크게 두가지가 있다.
속성
// Attrubute메소드
// Methods
캡슐화 (Encapsulation)
- 기능을 하나의 단위로 만들어 놓은 것
- 동작은 노출 시킴
상속 (Inheritance)
- 부모 클래스의 특징을 자식 클래스가 물려 받는 것
- 식물 >>> 나무 // 동물 >>> 호랑이
추상화 (Abstraction)
- 내부 구조는 복잡하나 실제로 우리가 보는 부분은 단순하게 만든다는 개념
- 핸드폰을 볼때 스크린 하나 밖에 안보이며, 터치가 되고, 양 옆에는 버튼이 존재하지만 내부적으로는 여러 프로그램 및 기능이 있어야 한다.
다형성 (Polymorphsim) // 개념 이해 부족..
OOP의 장점
캡슐화
: 재사용성 높인다추상화
: 코드를 단순화 시킨다.상속
: 필요한 코드만 사용한다 >>> 재사용성을 높인다.다형성
: 조건문 사용 대신 객체 특성의 맞게 달리 작성한다.
반응형
'Language > JS' 카테고리의 다른 글
[JS] HTTP (0) | 2021.07.20 |
---|---|
[JS]네트워크 - REAT API (0) | 2021.07.20 |
[JavaScript] 비동기 Callback/Promise/async,await (0) | 2021.06.22 |
[CSS] 개념 및 Selector (0) | 2021.06.11 |
[HTML] 개념 및 개인 공부 (0) | 2021.06.11 |