Chapter [ 객체 지향 ]

[ 클래스를 이용한 모듈화 ]

1. 객체 지향 프로그래밍이란 ?

프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법

2. 클래스 함수

클래스를 만드는 암묵적인 규칙으로, 보통 클래스는 대문자, 그리고 일반명사로 만든다.

class Rectangle {
  constructor(brand, name, color){
}

constructor (생성자) = 클래스로 객체를 생성할 때 호출

3. new 키워드를 통해 클래스의 인스턴스를 만들어낼 수 있다.

const avante = new Car('hyundai', 'avante', 'blak');
const mini = new Car('bmw', 'mini', 'white')

4. 속성

속성은 브랜드, 차 이름, 현재 연료 상태, 최고 속력

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

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

함수가 실행될 때, 해당 scope마다 생성되는 고유한 실행 context
new 키워드로 인스턴스를 생성했을 때에는, 해당 인스턴스가 바로 this의 값이 됨

5. 메소드

메소드(객체에 딸린 함수)는 연료주입, 속력 설정, 운전

class Rectangle{
  constructor(brand, name, color){
    this.brand = brand;
    this.name = name;
    this.color = color;
  }
  refuel(){
  }
  drive(){
  }
}

6. 인스터스에서의 사용

const avante = new Car('hyundai', 'avante', 'blak');
avante.color; // 'black'
avante.drive(); // 아반떼가 운전을 시작합니다

const mini = new Car('bmw', 'mini', 'white');
mini.brand; // 'bmw'
mini.refuel(); // 미니에 연료를 공급합니다

[ Prototype ]

1. 객체 지향 프로그래밍

oop 란?

• 사람이 세계를 보고 이해하는 방법을 흉내낸 방법론
• 모든 것은 "객체"로 그룹화된다.
• 4가지 주요 개념을 통해 재사용성을 얻을 수 있다.

• 캡슐화

  • 데이터(속성)와 기능(메소드)을 하나의 단위로 묶는 것

  • 은닉(hiding): 구현은 숨기고, 동작은 노출시킴

  • 느슨한 결합(Loose Coupling)에 유리: 언제든 구현을 수정할 수 있음

  • 느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미

  • 코드가 복잡하지 않게 만들고, 재사용성을 높입니다

• 상속

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

  • 불필요한 코드를 줄여 재사용성을 높인다.
    

• 추상화

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

  • 인터페이스(메소드와 속성만 정의한 것)가 단순해진다.

  • 클래스를 사용하는 사람이 필요하지 않은 메소드 등을 노출시키지 않고, 단순한 이름으로 정의하는 것에 포커스가 맞춰져 있다.

  • 코드가 복잡하지 않게 만들고, 단순화된 사용으로 인해 변화에 대한 영향을 최소화

• 다형성

  • "다양한 형태"를 가질 수 있다.

  • 동일한 메소드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능

2. 클래스와 프로토타입

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

• 자바스크립트의 클래스는 프로토타입을 이용해 구현하는 것

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

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

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

3. 프로토타입 체인

• class 문법으로 상속

//부모 클래스 + 슈퍼 클래스
class Rectangle{
  constructor(width, height){
    this.width = width
    this.height = height
  }

  getArea(){
    return this.width * this.height
  }

  getPerimeter(){
    return 2 * (this.width + this.height)
  }
}

//자식 클래스 + 서브 클래스
class Square extends Rectangle {
  constructor(width){
    super() // super(width, width)
    this.width = width;
    this.height = width;
  }
}

 - 하위 클래스를 만드려면 Javascript에서 extends 키워드를 통해 상속 받을 클래스를 명시

 - 상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드

const rect = new Rectangle(20, 10)
console.log(`넓이: ${rect.getArea()}`)
console.log(`둘레: ${rect.getPerimeter()}`)

const square = new Square(10, 10)
console.log(`넓이: ${square.getArea()}`)
console.log(`둘레: ${square.getPerimeter()}`)

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