- 객체 지향
- 프로토타입
- 회고
📌 객체지향
클로저 모듈 패턴
메서드를 호출해서 사용한다면 카운트가 여러개가 필요하고 코드를 여러번 만들어야함
[차이]
| 메서드 호출 | 클로져 모듈 패턴 | |
|---|---|---|
| 정보 은닉 | 모든 곳에서 메서드 호출 | 모듈 내부의 변수와 함수를 외부로부터 숨김 → 모듈의 내부 상태를 보호, 외부에서 접근할 수 없는 프라이빗 멤버를 생성 |
| 네임스페이스 충동발지 | 전역 네임스페이스를 사용하므로, | |
| 이름 충동 가능성이 높아짐 | 모듈은 독립적인 스코프를 가지고 있어 변수나 함수와 충돌 방지 | |
| 재사용과 테스트 | 해당 메서드에 종속된 환경이나 상태를 모듈 밖에서 조작 어려움 | 독립적으로 테스트하고 재사용 가능 |
| 외부에서 직접 접근이 불가하기때문에 내부 동작에 집중 가능 |
let counter1 = {
value: 0,
increase: function() {
this.value++
// 메서드 호출을 할 경우, this는 counter1을 가리킵니다
},
decrease: function() {
this.value--
},
getValue: function() {
return this.value
}
}
counter1.increase()
counter1.increase()
counter1.increase()
counter1.decrease()
counter1.getValue() // 2function makeCounter() {
let value = 0;
return {
increase: function() {
value++;
},
decrease: function() {
value--;
},
getValue: function() {
return value;
}
}
}
let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1
let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2클래스(class)와 인스턴스(instance)
- 클래스(class) → 첫글자는 대문자로 : 하나의 모델이 되는 청사진(blueprint)/ 일종의 원형(original form) ⇒ 클래스는 객체를 만들기 위한 생성자(constructor) 함수를 포함
- 인스턴스(instance) : 청사진을 바탕으로 한 객체(object)/ 클래스의 사례 (instance object)
function Car(brand, name, color) {
//인스턴스 실행 코드
}class Car {
constructor(brand, name, color) {
//인스턴스 실행 코드
}
}[예시]
- 고유의 속성 : 색상, 가격, 속력
- 메서드 : 시작, 후진, 전진, 멈춤
new키워드
각각의 인스턴스는 car라는 클래스의 고유한 속성,메소드를 가짐
→ 선언된 부모 객체의 요소들을 새로운 변수에 할당함 (부모 객체를 가져와서 새로 생성을 한다의 의미.)
let **avante** = new Car('hyundai','avante', 'black');속성과 메서드
: 클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용
- 클래스 : 속성의 정의
function Car(brand, name, color) {
this.brand = brand;
this.name = name;
this.color = color;
}class Car {
constructor(brand, name, color) {
this.brand = brand;
this.name = name;
this.color = color;
}
}- 클래스 : 메소드의 정의
function Car(brand, name, color) {
car.prototype.refuel = function() {
//연료 공급을 구현하는 코드
}
car.prototype.dirve = function() {
//운전을 구현하는 코드
}
}class Car {
constructor(brand, name, color) {
refuel () {
}
dirver () {
}
}
}constructor
: 인스턴스가 초기활될 때 실행하는 생성자 함수
📌 객체 지향 프로그래밍
- 절차적 언어 : 초기의 포그래밍 언어 (c,포트란)/ 순차적인 명령의 조합
- 객체 지향 언어 : 클래스라는 데이터 모델의 청사진을 사용해 코드 작성 (Java, C++)/ JavaScript도 객체지향으로 작성가능
OOP
: 프로그램 설계 철학/ oop모든 것은 객체로 그룹화 되어짐
[객체 내에는 “데이터와 기능이 함께 있다”라는 원칙에 따라 메서드와 속성이 존재]
Ex) 자동차를 예시로 들었을때
- 공통 기능 : 속도, 주유
- 고유의 속성 : 색상, 최고 속력, 탑승인원 ⇒ 새로운 객체를 만들때, “이번에는 만들 자동차는 빨간색의 최고 속력은 200km/h를 내도록 만들어보자!”와 같이 속성에 고유한 값을 부여할 수 있다.
OOP Basic Concepts
- 캡슐화 Encapsulation (복잡한 코드 x, 재사용성 높음)
-
데이터와 기능을 하나의 단위로 묶음
-
은닉(hiding) : 구현은 숨기고, 동작은 노출
-
느슨한 결함(Loose coupling)에 유리 : 언제든 구형을 수정 가능
[예시] 마우스 구동 : 마우스의 상태를 속성(property)로 정하고 클릭 이동을 메서드(method)로 정해서 코드만 보고도 인스턴스 객체의 기능을 상상할 수 있게 작성하는 것이 느슨한 결합을 추구하는 코드 작성법
-
-
추상화 Abstraction (인터페이스 단순화된/ 영향 최소화)
: 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스
- 상속 Inheritance (불필요한 코드 x/ 재사용성 높음) : 기본 클래스(basic class)의 특징을 파생 클래스(derived class)가 상속받음
**[예시]** Student라는 클래스를 작성할때 Human 클래스를 상속받아 추가적으로 내용을 넣음 
- 다형성 Polymorphism (동일한 메서드에 대해 조건문 대신 객체의 특성에 맞게 달리 작성이 가능)
: 같은 이름을 가진 메서드라도 조금씩 다르게 작동
[예시] TextBox, Select, Checkbox의 공통의 부모인 HTML Element라는 클래스에 render라는 메서드를 만들고 상속을 받게 만들 수 있습니다. 그런데 다형성의 핵심은 이 같은 이름의 render라는 메서드가 조금씩 다르게 작동
📌 프로토타입
prototype
: 원형 객체를 의미
(정의가 그지같지만…사람으로 비유해 말하면 유전자라고 할 수 있음.. 조상부터 거슬러거슬러 내려오는..)
- 부모요소 : 속성과 메서드를 물려줌
- 자식요소 : 그것을 불려받음 ⇒ 이것이 바로 상속!
Human이라는 클래스와 인스턴스, 프로토타입의 관계
- 프로토타입 체인 : 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있고 그 상위 프로토타입 객체도 받을 수 있다.
- .proto : prototype속성에서 파생되어 객체 인스턴스를 구현
Array클래스와 인스턴스, 프로토타입의 관계
예시
- Human 클래스의 생성자 함수는 Human
- Human 클래스의 프로토타입은 Human 클래스의 인스턴스의 Kimcoding.proto
- Human 클래스의 sleep 메서드는 프로토타입에 있으며, Human의 인스턴스인 Kimcoding에서 Kimcoding.sleep으로 사용
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}은 잠에 들었습니다`);
}
}
let kimcoding = new Human('김코딩', 30);
Human.prototype.constructor === Human; //true
Human.prototype === kimcoding.__proto__; //true
Human.prototype.sleep === kimcoding.sleep; //true🙋🏻♀️회고
어제 충격의 고차함수 이후로… 객체지향과 프로토타입을 들어가는데..
이또한 충격의 도가니탕.ㅋ
그래도 고차함수보다는 이해가 간다… 아마도…
