TIL) JavaScript 객체 지향 프로그래밍

omegle·2022년 9월 21일

클래스와 인스턴스

객체 지향 프로그래밍이란?
: 하나의 모델이 되는 청사진을 만들고, => class
그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 => instance
객체지향 프로그래밍은 현실 세계를 기반으로 프로그래밍 모델을 만들때 유리하다!

객체는 일반적인 함수를 정의하듯 만든다.
이 때, new 키워드를 사용한다.(새로운 인스턴스를 만드는 방법)

클래스는 보통 대문자로 시작해 일반명사로 만든다(다른 함수와 구분하기 위함)
클래스에 속성과 메소드를 정의하고, 인스턴스에서 이용한다.

클래스 : 속성의 정의

ES5

function Car(brand, name, color) {
	this.brand = brand;
    this.name = name;
    this.color = color;
}

ES6

 class Car {
 constructor(brand, name, color) {
 this.brand = brand;
 this.name = name;
 this. color = color;

this
= 한마디로 인스턴스 객체
= parameter로 넘어온 브랜드, 이름, 색상 등은 instance 생성시 지정하는 값이며,
위와 같이 this에 할당한다는 것은 만들어진 인스턴스에 해당 브랜드, 이름, 색상을 부여하겠다는 의미

클래스 : 메소드의 정의

ES5

function Car(brand, name, color) { /* 생략 */ }

Car.prototype.refuel = function() {
  // 연료 공급을 구현하는 코드
}
Car.prototype.drive = function() {
  // 운전을 구현하는 코드
}

ES6

class Car {
	 constructor(brand, name, color) { /* 생략 */}
  
		 refuel() {
		 }
		 drive() {
		 }
}

prototype
= 모델의 청사진을 만들 때 쓰는 원형 객체(original form)
constructor
= 인스턴스가 초기화될 때 실행하는 생성자 함수
this
= 함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context(execution context) new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨

ES5

function Car(brand, name, color) {
	this.brand = brand;
    this.name = name;
    this.color = color;
}

Car.prototype.drive = function() {
	console.log(this.name + '가 운전을 시작합니다')
}

let avante = new Car('hyndai', 'avante', 'black');
avante.color; // 'black'
avante.drive(); // 'avante가 운전을 시작합니다'

ES6로 변경하면

class Car {
  constructor(brand, name, color) {
    this.brand = brand;
    this.name = name;
    this.color = color;
	}

  drive() {
    console.log(this.name + '가 운전을 시작합니다')
  }

객체 지향 프로그래밍(OOP)

절차적 언어(과거)

초기의 프로그래밍 언어는 일반적으로 절차적 언어라고 부름. (C, 포트란 등)
절차적 언어는 순차적인 명령의 조합

객체 지향 언어

"클래스"라고 부르는 데이터 모델의 청사진을 사용.
현대의 언어들은 대부분 객체 지향의 특징을 갖고 있음(대표적으로 java, C++, C# 등)
JavaScript: 객체 지향으로 작성 가능.

OOP

OOP는 프로그램 설계 철학 중 하나
OOP의 모든 것은 "객체"로 그룹화됨, 이 객체는 한번 만들면 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지됨.
OOP의 4가지 주요 개념을 통해 재사용성을 얻을 수 있음.

클래스와 인스턴스

클래스는 일종의 원형(original form)으로, 객체를 생성하기 위한 아이디어나 청사진
인스턴스는 클래스의 사례(instance object)
클래스는 객체를 만들기 위한 생성자(constructor) 함수를 포함.

객체지향 프로그래밍(OOP)의 주요 개념

캡슐화(Encapsulation): 데이터와 기능을 하나의 단위로 묶는 것
- 은닉(hiding): 구현은 숨기고, 동작은 노출시킴
  -> 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음
상속(Inheritance)
-> 부모 클래스의 특징을 자식 클래스가 물려받는 것
-> 다른 말로 기본 클래스(base class)의 특징을 파생 클래스(derived class)가 상속 받는다
-> 부모 클래스를 상속받고, 자식 클래스에 다른 속성/메서드를 추가할 수 있음
추상화(Abstraction)
-> 내부 구현은 복잡해도 실제 노출부분은 단순하게 만든다는 개념
-> 클래스를 사용하는 사람이 필요하지 않은 메서드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것
-> 클래스 정의 시, 메서드와 속성만 정의한 것이 인터페이스(추상화의 본질)
다형성(Polymorphism)
-> 같은 이름을 가진 메서드라도 조금씩 다르게 작동할 수 있음

객체지향 프로그래밍(OOP)의 주요 개념의 장점

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

객체지향 프로그래밍(OOP)의 의미

코드 상에서, 혹은 화면에 보이는 하나의 요소를 객체 단위로 구분시켜서 생각하면, 보다 이해하기 쉬운 코드를 작성할 수 있게 된다. OOP의 특성을 이해하고 잘 사용하면 좋은 설계를 할 수 있다.

prototype

= 모델의 청사진을 만들 때 쓰는 원형 객체(original form)
= 일종의 유전자

ex)

부모.prototype.name = 'kim'

자식.name   // "kim"

부모에 직접 쓰면 자식이 직접 가지지만
유전자에 쓰면 부모만 {name:'kim'} 가진다.(자식이 끌어다 쓴다)

따라서 상속을 하고 싶으면 prototype을 사용!

부모 유전자에 있는걸 자식이 사용 가능한 이유는 뭘까?

Javascript에서 자식.name을 조회할때
nunu가 name을 가지고 있지 않으면 -> nunu 부모유전자를 뒤진다

<object에서 자료 뽑을 때 일어나는 일>
1. 직접 자료를 가지고 있으면 그거 출력
2. 없으면 부모유전자까지 뒤짐
3. 없으면 부모의 부모 유전자까지....없을때까지 계속함

prototype chain

상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용
부모 클래스 : 속성과 메서드를 물려주는 클래스
자식 클래스 : 속성과 메서드를 물려받는 클래스
그리고 이 과정을 상속이라 함

prototype 객체는 기본적인 속성으로 constructor와 proto 를 가지고 있다
이중 proto 에는 자식의 부모 prototype 객체를 가리키는 링크를 담고 있다

DOM과 프로토타입

__proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있음.

Object = 가장 상위 객체(모든 객체의 부모격) 따라서 모든 프로토타입 chain의 종점은 Object.prototype

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

div.__proto__  // HTMLDivElement
div.__proto__.__proto__ // HTMLElement
div.__proto__.__proto__.__proto__ // Element
div.__proto__.__proto__.__proto__.__proto__ // Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // object
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // null