6주차 - 1. OOP 객체 지향 프로그래밍

📎 OOP 객체 지향 언어

절차지향

순차적인 처리가 중요시되며, 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법
컴퓨터의 처리 구조와 유사하여 객체지향 언어보다 빠르게 처리된다.

객체지향 Object oriented Language

별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식.

데이터와 기능이 별개로 취급되지 않고, 객체 내에 데이터와 기능이 함께있다는 원칙에 따라 메소드와 속성이 존재한다.

기능별로 묶어 모듈화하기 때문에, 중복연산 제거, 모듈 재활용이 가능하다.

즉, 객체 지향 프로그래밍은 하나의 모델이 되는 청사진을 만들고,(=> class)
그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴(=> instance)

⚠️ 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않는다.

클로저 모듈 패턴

function makeCounter() {
  return {
    value: 0,
    increase: function() {
      this.value++ // 메소드 호출을 할 경우, this는 makeCounter 함수가 리턴하는 익명의 객체입니다
    },
    decrease: function() {
      this.value--
    },
    getValue: function() {
      return this.value;
    }
  }
}

let counter1 = makeCounter()
counter1.increase()
counter1.getValue() // 1

let counter2 = makeCounter()
counter2.decrease()
counter2.decrease()
counter2.getValue() // -2

생성자 & instance

• 생성자 : 인스턴트 객체가 생성될 때 때 사용하는 함수.

• 인스턴스 : 클래스를 통해 만들어진 객체를 인스턴스 객체, 인스턴스라고 부른다.
  인스턴스를 만들 때에는 new 키워드를 사용한다. 즉시 생성자 함수가 실행되며, 변수에 새로운 객체, 즉 클래스의 고유한 속성과 메소드를 가진 인스턴스가 할당된다.

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

OOP basic concepts

• 추상화
  객체들의 공통적인 특징을 도출하고,
  복잡한 내부 구현에서, 실제로 노출되는 부분은 단순하게 만든다는 개념

• 캡슐화
  데이터(속성)와 기능(메소드)을 따로 정의하지 않고, 하나로 묶어 관리한다.
  실제 구현되는 부분을 외부 노출하지 않도록 정보를 은닉할 수 있다.

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

• 다형성
  다양한 형태
  객체 역시 똑같은 메소드라 하더라도, 다른 방식으로 구현될 수 있다.

캡슐화는 코드가 복잡하지 않게 만들고, 재사용성을 높입니다.

추상화는 마찬가지로 코드가 복잡하지 않게 만들고, 단순화된 사용으로 인해 변화에 대한 영향을 최소화합니다

상속 역시 불필요한 코드를 줄여 재사용성을 높입니다.

다형성으로 인해 동일한 메소드에 대해 if/else if와 같은 조건문 대신 객체의 특성에 맞게 달리 작성하는 것이 가능해집니다.

📎 생성자 함수 & Class 클래스

const instance = new 생성자()

1. 생성자 함수

참고로, 생성자 함수는 return값을 만들지 않는다.

const User = function (name, age) {
  this.name = name;
  this.age = age;
  this.showName = function () {
    console.log(this.name);
  };
};

const mike = new User('Mike', 30);
// showName이 객체 내부에 있음.

2. Class 클래스

constructor

인스턴스 객체를 생성하는 과정에서 초기화할 때 실행되는 함수
즉, 객체가 생성될 때 생성되기 전에 실행되어 초기값을 세팅하는 함수

class User2 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const tom = new User2('Tom', 22);
// showName이 프로토타입 내부에 있음.

📎 상속 / 프로토타입 prototype

1. 생성자 함수 상속

__proto__

인스턴트 객체의 __proto__ 프로퍼티는 자신을 만들어낸 원형을 의미하는 프로토타입 객체(ex. Human's prototype)를 참조하는 링크를 가짐.

const car = {
  wheels: 4,
  drive() {
    console.log('drive..');
  },
};

const bmw = {
  color: 'red',
  navigator: 1,
};

const benz = {
  color: 'black',
};


// bmw, bnez, audi는 car의 상속을 받는다.
bmw.__proto__ = car;
benz.__proto__ = car;
audi.__proto__ = car;

아래와 같이 상속은 계속될 수 있다.

const x5 = {
  color: 'white',
  name:'x5"
}
x5.__proto__ = bmw;

아래와 같이 for in문에서는 상속받은 프로퍼티가 모두 나온다.
(*단, class로 생성한 경우 본래 가지고 있는 프로퍼티만 나온다. 즉, 상속받은 프로퍼티는 보여주지 않는다.)

객체 내장 메소드에서 상속된 프로퍼티는 나오지 않는다.

for(p in x5){console.log(p)}
color
name
navigator
wheels
drive

Object.keys(x5)
(2) ["color", "name"]

Object.values(x5)
(2) ["red", "x5"]

x5
{color: "red", name: "x5"}

prototype 속성

prototype 속성은 프로토타입 객체를 참조한다.

function BMW(color) {
  this.color = color;
};

// drive라는 함수는 한번만 정의되기 때문에 성능 UP, 메모리 낭비 DOWN.

Bmw.prototype.drive = function () {
  console.log('drive..');
};

const x5 = new Bmw('red');
const z4 = new Bmw('blue');

console.log(x5.drive()) // drive..

2. class 상속

extends

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log('drive...');
  }
  stop() {
    console.log('STOP..');
  }
}

class Bmw extends Car {
  park() {
    console.log('Park');
  }
}

const z4 = new Bmw('blue');

super

자식생성자는 부모생성자를 무조건 호출해야한다.

constructor를 써주지 않은 경우

constructor(...args){super(...args)};

위와 같이 constructor가 있는 것처럼 동작한다.
하지만, constructor를 썻다면, 꼭 super로 호출해 주어야 한다.

상속 클래스의 생성자에선 반드시 super(...)를 호출해야 하는데, super(...)를 호출하지 않아 에러가 발생한다. super(...)는 this를 사용하기 전에 반드시 호출한다.

class Bmw extends Car {
  constructor(color) {
    super(color);
    this.navigatoin = 1;
  }
  park() {
    console.log('Park');
  }
  stop() {
    super.stop();
    console.log('off');
  }
}

📎 class prototype instance 관계

class prototype instance관계 정리

참조)

**생활코딩 객체 지향 프로그래밍

코딩앙마 객체 지향 프로그래밍

**프로토타입 자세한 개념 정리 블로그 good!!