210510_객체 지향 프로그래밍/Object Oriented Programming
------------TOY------------
수도코드, 알고리즘, 사고 훈련
40분 시도, 20분 레퍼런스 비교 접근방식 확인
통과목적 x!(but 제출
객체 지향 프로그래밍/Object Oriented Programming
하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴
자동차 생산을 위한 설계도에 비유됩니다. 자동차가 기능하기 위해서는 네 바퀴와 핸들, 좌석 그리고 엔진이 필요할 것입니다. 이러한 기본적인 설계는 차의 종류에 상관없이 대체적으로 동일
인스턴스(instance) : 그냥 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object)
클래스(class) : 청사진
데이터와 기능을 한데 묶어서 처리
속성과 메소드가 하나의 "객체"라는 개념에 포함되며, 이는 자바스크립트 내장 타입인 object(이하, object literal)와는 다르게, 클래스(Class)라는 이름으로 부릅니다.
Class를 정의하는 한 가지 방법은 class 선언을 이용하는 것입니다. class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 class 키워드를 사용해야 합니다.
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}함수 선언과 클래스 선언의 중요한 차이점:
함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 x
메소드 호출 - Singleton 패턴 : 단 하나의 객체만 만들 수 있습
메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다. 그 이유는 mdn
-> 화살표 함수는 자신의 this가 없다
클로저 모듈 패턴 : 똑같은 기능을 하는 카운터를 여러 개 만드는 방법 중 하나
Class
클래스
일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어나 청사진입니다.
인스턴스
클래스의 사례(instance object) 입니다.
constructor 함수
클래스는 객체를 만들기 위한 생성자를 포함
세부사항 들어가지 않은 클래스에 생성자를 통해 세부 사항(속성) 을 넣어 줌. 함수에 인자를 넣듯
보통 클래스는 대문자, 그리고 일반명사로 만듭니다.
여기서 보이는 함수는, 객체지향 프로그래밍에서 생성자(constructor) 함수라고 부릅니다. 인스턴스가 만들어질 때 실행되는 코드죠.
참고로, 생성자 함수는 return값을 만들지 않습니다.
인스턴스를 만들 때에는 new 키워드를 사용합니다. 즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 꼭 닮은 새로운 객체, 즉 인스턴스가 할당됩니다.
각각의 인스턴스는 클래스의 고유한 속성과 메소드를 갖게 됩니다.
속성(property)의 정의 :
'this'이용
한마디로 this는 인스턴스 객체를 의미합니다. parameter로 넘어온 브랜드, 이름, 색상 등은 인스턴스 생성시 지정하는 값이며,
위와 같이 this에 할당한다는 것은, 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미입니다.
메소드(method) 정의 :
ES6에서는 생성자 함수와 함께 class 키워드 안쪽에 묶어서 정의합니다. refuel() {}, drive() {}와 같이 작성되어 있는 부분입니다.
모든 자동차는 공통적인 기능과 고유의 속성이 있습니다. 속도를 낸다던지, 주유를 한다던지 등의 기능이 존재하며, 속성으로는 색상, 최고 속력 혹은 탑승인원 등과 같은 고유의 데이터가 존재
새로운 객체를 만들 때, "이번에 만들 자동차는, 빨간색의 최고 속력은 200km/h 를 내도록 만들어보자!"와 같이, 속성에 고유한 값을 부여할 수 있습니다.
클래스의 유용한 예제 :
배열 new Array
Object prototypes
Object 그 자체도 객체. 모든 객체의 최종 prototype 생성자를 통해 만든 객체의 prototype의 prototype도 Object 객체
JavaScript는 흔히 프로토타입 기반 언어(prototype-based language) / JavaScript에서 거의 모든 객체는 Object의 인스턴스
프로토타입(Prototype)은 원형 객체를 의미
상속 받는 멤버들은 prototype 속성(sub-namespace라고도 하죠)에 정의되어 있기 때문입니다. — Object.로 시작하는게 아니라, Object.prototype.로 시작하는 것들이죠. prototype 속성도 하나의 객체이며 프로토타입 체인을 통해 상속하고자 하는 속성과 메소드를 담아두는 버킷으로 주로 사용되는 객체
=== 같은 주소값 가진다는 뜻 기억
참조와 비슷(같다?)
프로토타입 체인
생성자를 통해 만든 객체의 prototype의 prototype도 Object 객체입니다.
function Person(name) { this.name = name; }
Person.prototype.sayHello = function() {
alert(this.name);
};
var zero = new Person('zero');
zero.__proto__; // { sayHello: function() }
zero.__proto__.__proto__; // Object { ... }Object 객체 자체의 prototype -> null
Object가 최종이기 때문이죠. Object 객체의 생성자는 window 객체에 저장되어 있습니다. 모든 객체가 Object 객체로부터 상속받기 때문에 모든 객체는 Object 객체의 메소드들을 사용
Math.__proto__.__proto__; // null
인스턴스의 __proto__를 이용 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.
(div와 div의 textContent proto, button의 prototype 탐색 결과/ BUT 아직 부정확 추후수정)
(콘솔창에 써서 옆에 뜨기도함)
addEventListener 속성은 어떤 클래스의 프로토타입에서 찾을 수 있나요? -> EventTarget
remove 메소드는 어떤 클래스의 프로토타입에서 찾을 수 있나요? Element
모든 객체에 toString() 메소드가 존재하는 이유
모든 객체에는 객체가 텍스트 값으로 표시되거나 객체가 문자열이 예상되는 방식으로 참조 될 때 자동으로 호출되는 toString() 메서드가 있습니다. 기본적으로 toString() 메서드는 Object에서 비롯된 모든 객체에 상속됩니다. 이 메서드가 사용자 지정 개체에서 재정의되지 않으면 toString()은 [object type]을 반환합니다. 여기서 type은 object type
mdn
OOP
사람이 세계를 보고 이해하는 방법을 흉내낸 방법론
캡슐화 Encapsulation
데이터와 기능을 하나의 단위로 묶는 것
은닉(hiding): 구현은 숨기고, 동작은 노출시킴
느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음
코드가 상징하는 실제 모습과 닮게 코드를 모아 결합
추상화 Abstraction
내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념입니다.클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 기능 단순한 이름으로 정의하는 것에 포커스
클래스 정의 시, 메소드와 속성만 정의한 것을 인터페이스
상속 Inheritance
"기본 클래스(base class)의 특징을 파생 클래스(derive class)가 상속받는다"
학생의 본질은 결국 사람이므로, 상속을 이용하여 학생(Student) 클래스는 사람(Human)클래스를 상속받을 수 있습니다. 학생은 추가적으로 학습 내용, 공부하다와 같은 속성/메소드를 추가
다형성 Polymorphism
이 엘리먼트를 여러분들이 직접 구현한다고 생각해보세요. 모든 엘리먼트들은 전부 객체이므로, 내부적으로 모양을 그리고 화면에 뿌리는 메소드가 존재할 것입니다. 이 메소드가 render라는 이름을 갖고 있다고 가정해봅시다.
다형성의 핵심은 이 같은 이름의 render 라는 메소드가 조금씩 다르게 작동한다는 데 있습니다.
