출처: 유어클래스

1. 객체 지향 프로그래밍

객체 지향 프로그래밍 패러다임을 따라해 보면, 사람이 세계를 보고 이해하는 방법과 매우 흡사하다

1) 클래스와 인스턴스

붕어빵 틀 ㅡ> class
재료 ㅡ> instance

일반적인 다른 함수와 구분하기 위해 클래스는 보통 대문자로 시작하며 일반명사로 만든다.
일반적인 함수는 적절한 동사를 포함하고 소문자로 시작한다.

function Car(color) {}

메서드는 쉽게 말해 "객체에 딸린 함수"

인스턴스를 만들 때에는 new 키워드를 사용한다.
즉시 생성자 함수가 실행되며, 변수에 클래스의 설계를 가진 새로운 객체, 즉 인스턴스가 할당된다.

각각의 인스턴스는 클래스의 고유한 속성과 메서드를 갖게 된다.
부모 클래스가 있고, 자식 클래스가 생성자 함수를 작성하지 않았다면 부모 생성자를 부른다.

2) 객체 지향 프로그래밍

OOP는 프로그램 설계 철학
OOP의 모든 것은 "객체"로 그룹화된다
이 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다.
OOP의 4가지 주요 개념에는 캡슐화, 추상화, 상속, 다형성이 있다.

(1) 캡슐화

• 데이터와 기능을 하나의 단위로 묶는 것
• 은닉(hiding): 구현은 숨기고, 동작은 노출시킴
• 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음

(2) 추상화

• 내부 구현은 아주 복잡한데, 실제로 노출되는 부분은 단순하게 만든다는 개념

• 캡슐화가 코드나 데이터의 은닉에 포커스가 맞춰져있다면, 추상화는 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

• 클래스 정의 시, 메서드와 속성만 정의한 것을 인터페이스라고 부른다. 이것이 추상화의 본질

(3) 상속

• 부모 클래스의 특징을 자식 클래스가 물려받는 것 (기본 클래스와 파생 클래스)

(4) 다형성

• "말하다"라는 동작의 본질은 "입으로 소리를 내다"를 의미한다.
  그러나, 각기 다른 동물들이 "말할 때" 제각각의 소리를 내는 것처럼, 객체 역시 똑같은 메서드라 하더라도, 다른 방식으로 구현될 수 있다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

2. 프로토타입

1) 프로토타입과 클래스

JavaScript는 프로토타입 기반 언어이다.
여기서 프로토타입(Prototype)은 원형 객체를 의미한다.

밑에 실습 결과 true로 나옴.

- Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계

1. Human 클래스의 생성자 함수는 Human입니다.
2. Human 클래스의 프로토타입은 Human 클래스의 인스턴스인 kimcoding의 __proto__
3. Human 클래스의 sleep 메서드는 프로토타입에 있으며,
   Human 클래스의 인스턴스인 kimcoding에서 kimcoding.sleep으로 사용할 수 있다.

- Array(배열) 클래스와 인스턴스, 그리고 프로토타입의 관계

우리가 흔히 쓰는 배열 역시 원리가 동일하다. 배열(arr)은 Array 클래스의 인스턴스이며, 프로토타입에는 다양한 메서드가 존재한다.

지금까지 써왔던 배열은 Array 클래스의 인스턴스이며, Array.prototype에는 push, pop 등 다양한 메서드가 있다.

2) 프로토타입 체인

• 객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용

• 자바스크립트에서는 extends 와 super 키워드를 이용해서 상속을 구현할 수 있다.

super

• super 키워드는 부모 클래스의 함수를 호출할 때 사용.
• 생성자 함수 내에서 쓰일때는, super 키워드는 한번만 사용될 수 있다.
  this 키워드가 사용되기 전에 사용되어야 하며, 그렇지 않을 경우 Reference 에러가 발생한다.
• 생성자 함수 내에서 super를 호출하면 부모 클래스의 생성자 함수를 호출한다.

DOM과 프로토타입

보통 클래스의 인스턴스는 new 키워드로 생성하지만, DOM에서는 new 키워드가 아닌 createElement를 사용

화살표 방향은 부모를 가리킨다.
EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재한다.

인스턴스의 __proto__를 이용하면 이를 더 확실하게 확인할 수 있다.
__proto__를 이용하면 부모 클래스의 프로토타입,
혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있다.

let div = document.createElement('div');

div.__proto__.__proto__
div.__proto__.__proto__.__proto__

ㅡ> HTMLElement, Element

예문

Student는 extends 키워드를 이용하여 Human 클래스를 상속.
따라서 부모 클래스는 Human이고 자식 클래스는 Student.