Chapter1. 객체 지향
Chapter1-1. 클로저 모듈 패턴
클로저를 이용해 매번 새로운 객체 생성하기
-> 같은 기능을 하는 객체를 여러개 만들 수 있음.
-> (코드를 줄이면서)재사용 가능!
Chapter1-2. 클래스와 인스턴스
클래스란? 설계본/오리지널/청사진
- 클래스를 만드는 방법:
-- (에크마5) function 클래스명(속성, 속성..){}
-- (에크마6) class 클래스명 {constructor(속성, 속성...){} }
클래스는 객체를 만들기 위한 생성자함수를 포함한다!
인스턴스란? 실물/사례/클래스를 통해 만들어진 객체
- 인스턴스 만드는 방법:
new 키워드 사용 -> 즉시 생성자 함수가 실행됨
각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 됨.
let 인스턴스명 = new 클래스명('속성','속성'...)
속성과 메서드: 클래스에 속성과 메서드를 정의하고 인스턴스에서 이용
-
속성의 정의
-- (에크마5) function 클래스명(속성, 속성..){this.속성 = 속성;}
-- (에크마6) class 클래스명 {constructor(속성, 속성...){this.속성 = 속성;} } -
메서드의 정의
-- (에크마5) function 클래스명(속성, 속성..){//생략}
클래스명.prototype.refuel = function(){//연료공급구현코드}
-- (에크마6) class 클래스명 {constructor(속성, 속성...){//생략}
refuel() {}
}
인스턴스에서의 사용
let 인스턴스명 = new 클래스명('속성','속성'...);
인스턴스명.속성;
인스턴스명.메서드();
prototype이란? 원형객체, 오리지널 폼
constructor란? 인스턴스가 초기화될 때 실행하는 생성자 함수....????
this란? 함수가 실행될 때, 해당 스코프에 생성된 실행컨텍스트
Chapter1-3. 객체 지향 프로그래밍
객체지향 프로그래밍이란?
클래스를 바탕으로 인스턴스를 만드는 프로그래밍 패턴
재사용성!
4가지 개념 :
1. 캡슐화: 데이터와 기능을 하나의 단위로 묶고 은닉 -> 코드가 복잡성을 줄이고 재사용성을 높임
2. 추상화: 복잡한 내부구현은 가리고 외부 인터페이스를 단순화 -> 사용자 오류를 줄임(변화에 대한 영향을 최소화)
3. 상속: 부모 클래스의 특징을 자식 클래스가 물려받음 -> 같은 코드의 반복을 제거
4. 다형성: 같은 메서드를 다른 방식으로 구현 가능
Chapter1-4. 객체 지향 차이점
자바스크립트의 한계
1. 은닉화의 한계: private키워드 없음/클로저모듈패턴 사용/#키워드 사용
2. 추상화의 부재: interface키워드 없음/interface는 의도한 사용법 노출에 용이
Chapter2. Prototype
Chapter2-1. 프로토타입과 클래스
class 클래스명 {
constructor(속성1, 속성2){
this.속성1 = 속성1;
this.속성2 = 속성2;
}
메서드(){
//구현코드
}
}
let 인스턴스명 = new 클래스명('속성', 속성)클래스명.prototype.constructor === 클래스명;
클래스명.prototype === 인스턴스명.__proto__; //true
클래스명.prototype.메서드 === 인스턴스명.메서드;클래스, 인스턴스, 프로토타입의 관계
- 클래스의 생성자함수constructor는 클래스이다
- 클래스의 prototype은 해당 클래스의 인스턴스의 __proto__이다
- 클래스의 메서드는 prototype에 있으며, 해당 클래스의 인스턴스에서 사용할 수 있다.
Chapter2-2. 프로토타입 체인
프로토타입 체인이란?
상속을 구현할 때 프로토타입 체인을 사용
extends키워드 super키워드 사용하여 상속을 구현할 수 있음
- extends키워드?
클래스 확장 문법: class 자식클래스명 extends 부모클래스명 - super키워드?
super.method(...)는 부모 클래스에 정의된 메서드, method를 호출합니다.
super(...)는 부모 생성자를 호출하는데, 자식 생성자 내부에서만 사용 할 수 있습니다.
참고: https://ko.javascript.info/class-inheritance
DOM과 프로토타입
Object(모든 클래스의 조상) <
EventTarget < Node < Element < HTMLElement < HTMLDivElement
이해도 자가 점검 리스트
Chapter1. 객체 지향
클로저 모듈 패턴에 대해 설명할 수 있다.
클래스와 인스턴스에 대해 설명할 수 있다.
클래스 문법을 이용할 수 있다.
Chapter2. Prototype
프로토타입이 무엇인지 설명할 수 있다.
프로토타입과 클래스의 관계에 대해 설명할 수 있다.
프로토타입 체인에 대해 설명할 수 있다.
