S2U2 [Javascript] 객체지향 프로그래밍

Chapter1-2. 클래스와 인스턴스

 

1.클래스

모델이 되는 "청사진" --> "class"

[es5]class는 함수로 정의 가능

[es6]class 라는 키워드로 정의가능(주로사용함)

 

2.인스턴스

"청사진"을 바탕으로 만든 객체 --> "instance" 

3.new 키워드

 

"new"키워드를 통해 class의 instance 만들어냄

4.생성자 함수

"constructor" : instance가 초기화될 때 실행하는 생성자 함수

 

5.ES5 클래스 작성 문법

6.ES6 클래스 작성 문법

 

 

Chapter1-3. 객체 지향 프로그래밍

 

1.객체 지향 프로그래밍

사람이 세계를 보고 이해하는 방법을 흉내 낸 방법론

 

2.캡슐화

• 데이터와 기능을 하나의 단위로 묶는 것
• 은닉(hiding): 구현은 숨기고, 동작은 노출시킴
• 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음
• 느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미

3.추상화

• 실제로 노출되는 부분은 단순하게 만든다는 개념
• 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춤
• 클래스 정의 시, 메서드와 속성만 정의한 것을 인터페이스라고 부름. 이것이 추상화의 본질

4.상속

상속은 부모 클래스의 특징을 자식 클래스가 물려받는 것

학생의 본질은 결국 사람이므로, 상속을 이용하여 학생(Student) 클래스는 사람(Human) 클래스를 상속받음. 학생은 추가적으로 학습 내용, 공부하다 와 같은 속성/메서드를 추가함.

 

5.다형성

Polymorphism이라는 단어의 poly는 "많은", 그리고 morph는 "형태"라는 뜻을 가지고 있음. 즉 "다양한 형태"를 가질 수 있다는 말

TextBox, Select, Checkbox의 공통의 부모인 HTML Element라는 클래스에 render라는 메서드를 만들고 상속을 받게 만들 수 있음.  다형성의 핵심은 이 같은 이름의 render라는 메서드가 조금씩 다르게 작동한다는 데 있음. TextBox는 가로로 긴 네모 상자와 커서가 있는 형태이고, Select 박스는 눌렀을 때 선택지가 화면에 나옴.  같은 이름을 가진 메서드라도 조금씩 다르게 작동함. 이것이 바로 다형성.

 

OOP의 주요 개념

• 캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높임.
• 추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 변화에 대한 영향을 최소화함.
• 상속 역시 불필요한 코드를 줄여 재사용성을 높임.
• 다형성으로 인해 동일한 메서드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해짐.

 

Chapter2-1. 프로토타입과 클래스

 

1. 프로토타입

• 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 함

2. .prototype

자바스크립에서는 함수를 정의하면 함수의 멤버로 prototype 속성이 생성되고,
프로토타입 객체가 생성된다. 프로토타입 객체에는 constructor 속성이 들어있다.

 

프로토타입 객체는 new 연산자를 사용해 생성된 해당 함수의 모든 객체의 원형이 되는 객체이다.

즉, new로 생성된 모든 객체는 하나의 프로토타입 객체를 참조할 수 있다.

 

함수의 prototype 속성은 생성된 프로토타입객체를 참조한다.

프로토타입 객체의 contructor 속성은 함수를 참조한다.

 

3. __proto__

• 특정 객체의 프로토타입 객체

객체가 생성되면 객체 안에는 __proto__라는 속성이 존재하는데 이 속성은 객체가 만들어지기 위해 사용된 프로토타입객체를 숨은 링크로 참조하게 된다.

아래와 같이 간단히 a라는 함수를 정의하고 a객체를 b에 생성하면
b안에는 __proto__ 속성이 있고, 이 속성은 프로토타입객체를 가르킨다(프로토타입 객체에는 contructor 속성이 존재)

결론적으로, Prototype은 두가지로 해석될 수 있다.

• 함수에 들어있는 프로토타입 객체를 참조하는 prototype 속성
• new연산자를 통해 생성된 객체 안에있는 __proto__ 속성이 참조하는 링크

prototype 예제

위의 예제같은 경우 Person에 들어있는 prototype속성을 이용해 프로토타입객체에 새로운 멤버 함수를 추가한다.

객체 a, b는 프로토타입객체를 참조 가능하므로 getTest()를 사용할 수 있다.

또한, 중요한 것은 프로토타입의 멤버함수(getTest())를 추가하기전 생성된 객체(a, b)에서도 멤버함수를 사용할 수 있다는 점이다.

 

4. 클래스, 인스턴스, 프로토타입의 관계