일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 백준 정리
- li 태그
- :root
- 드림코딩
- error: ENOENT: no such file or directory
- html 끝
- git 버전관리
- git
- 노마드 코더
- border radius
- calc()
- margin 0 auto
- WEB2-JavaScript
- Pull
- 나도코딩 파이썬
- 백준 자바스크립트
- 단계별로 풀어보기
- 생활코딩
- 나도코딩
- max-width
- button:focus cursor: pointer; outline: none;
- 생활코딩 WEB2-JavaScript
- 백준
- box-sizing: border-box
- 라매개발자
- 크롬웹
- nav태그
- 할만한데?
- 코딩테스트
- HTML
- Today
- Total
코딩응애의 개발블로그
코드스테이츠 블로깅 (클래스와 인스턴스 , 객체지향 프로그래밍, 프로토타입과 클래스) 본문
객체 지향 프로그래밍은 데이터와 기능을 한곳에 묶어서 처리한다. 속성과 메서드가 하나의 객체라는 개념에 포함.
자바스크립트 내장 타입인 object(이하, object literal)와는 다르게, 클래스(Class)라는 이름으로 부릅니다
클래스와 인스턴스
객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는
프로그래밍 패턴이다.
js에 그냥 객체가 아닌 "청사진"을 바탕으로 만들어진 객체는 인스턴스라고 하고 청사진은 클래스라고 부른다.
클래스를 만들때는 class 키워드를 이용한다. 클래스 안에는 생성자가 있다.
class Car {
constructor(brand, name, color) {
// 인스턴스가 만들어질 때 실행되는 코드
this.brand = brand;
this.name = name;
this.color = color;
}
} // 생성자(constructor) 함수라고 부른다 return 값을 만들지 않음
new 키워드를 써서 새로운 인스터스를 만든다 일반적인 함수와 구분하기 위해 대문자로 시작한다
인스턴스는 클래스의 속성과 메서드를 담고 있는 객체이다. 클래스로 만든 객체가 인스턴스라고 생각하면 쉬움.
let a = new Car('hy', 'avante', 'black');
a.color; // 'black'
ES5 vs ES6
클래스를 만들고 메소드를 정의하는 방법인데 둘이 방법이 다르다
// ES5 속성 정의
function Car(brand, name, color) {
this.brand = brand;
this.name = name;
this.color;
}
// ES5 메소드 정의
function Car(brand, name, color) {
Car.prototype.refuel = function() {
// 연료 공급 구현 코드
}
}
// ES6 속성 정의
class Car {
constructor(brand, name, color) {
this.brand = brand;
this.name = name;
this.color = color;
}
}
// ES6 메소드 정의
class Car {
constructor(brand, name, color) {
refuel() {
}
}
}
객체지향 프로그래밍(OPP)
주요 개념은 4가지가 있는데
캡슐화
데이터(속성)와 기능(메서드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것
은닉화"의 특징도 포함하고 있는데, 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도록 만드는 것
은닉화의 특징을 살려서 코드를 작성하면 객체 내 메서드의 구현만 수정하고, 노출된 메서드를 사용하는 코드 흐름은 바뀌지 않도록 만들 수 있습니다
예시 : https://alcohol-dev.tistory.com/1
추상화
내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념입니다 추상화를 통해 인터페이스가 단순해집니다
클래스 정의 시, 메서드와 속성만 정의한 것을 인터페이스라고 부릅니다. 이것이 추상화의 본질입니다.
상속
부모 클래스의 특징을 자식 클래스가 물려받는 것입니다.
다형성
객체 역시 똑같은 메서드라 하더라도, 다른 방식으로 구현될 수 있습니다
동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해집니다.
JavaScript는 프로토타입 기반 언어 입니다. 여기서 프로토타입(Prototype)은 원형 객체를 의미합니다.
'코드스테이츠(부트캠프)' 카테고리의 다른 글
코플릿 문제 풀면서 알게된 것들 - replace() (0) | 2022.08.01 |
---|---|
코드스테이츠 블로깅(프로토타입 체인) (0) | 2022.07.25 |
코드스테이츠 (S2U1 [JavaScript] 고차함수) (0) | 2022.07.21 |
코드스테이츠 Section 1 회고 (feat.벌써 한달?) (0) | 2022.07.20 |
코드스테이츠 17일차 ([JS/브라우저] DOM) (0) | 2022.07.14 |