자바스크립트 OOP(Object Oriented Programming)에 대해서

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

객체 지향 프로그래밍은 객체(Object), 즉 우리가 주변의 실세계에서 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상을 의미한다

객체 지향 프로그래밍은 캡.상.추.다. 4가지 특성을 가지고있다

1.캡슐화
객체 내 관련 비슷한 속성들을 하나의 class로 묶은 것이다 내부에서 외부로 공개되지 않으며 이 클래스를 마음대로 수정 할 수 없다
2.상속화
상위 클래스의 메소드와 속성, 특징을 그대로 물려받는 것을 의미한다
코드를 재사용 할 수 있고 하위클래스로 확장(extends)을 위해서 사용한다.
3.추상화
여러 가지 사물이나 개념(객체)에서 공통되는 속성을 추출해서 파악하는 것을 의미한다
모델링이라고도 하며 내가 관심있는 공통적인 부분을 추출하여 하나의 class로 만드는 것이다
4.다형성
상위 클래스로 물려받은 공통된 속성외에 각각의 하위클래스들이 가지고 있는 특성이 다른 것을 의미한다

객체지향은 클래스 기반 객체지향 프로그램 언어(Java, C++, C#, Python)는 클래스로 객체의 자료구조와 기능을 정의하고 생성자를 통해 인스턴스를 생성하지만

자바스크립트는 프로토타입 기반 객체 지향 프로그래밍으로 클래스 없이도 객체를 생성 할 수 있다(ES6 에서 클래스가 추가됨)

클래스란 객체 생성을 위한 청사진일 뿐이고 new 연산자를 통한 인스턴스(객체 생성)화 과정이 필요하다.

프로토기반인 자바스크립트에서 클래스가 추가되기 전, 클래스 없이 객체를 생성하는 방법이 존재한다

JavaScript에서 Object를 생성하는 여러가지 방법들

Functional

const Car = function (position) {
  //생성자 함수
  const someInstance = {};
  someInstance.position = position; // 프로퍼티

  someInstance.move = function () {
    // 메소드
    this.position += 1;
  };
  return someInstance;
};
const car1 = Car(5); // 인스턴스 생성

이러한 방법은 모든 메소드를 각각의 인스턴스들에게 할당하므로 메모리 낭비가 심하다

Functional Shared

const extend = function (to, from) {
  for (let key in from) {
    to[key] = from[key];
  }
};
const someMethods = {};
someMethods.move = function () {
  this.position += 1;
};
const Car = function (position) {
  const someInstance = {
    position,
  };
  extend(someInstance, someMethods);
  return someInstance;
};
const car1 = Car(5);
const car2 = Car(10);

메소드를 담아줄 객체를 생성해서 생성자 함수 내부에서 합쳐주는 방법입니다

Prototypal

const someMethods = {};
someMethods.move = function () {
  this.position += 1;
};

const Car = function (position) {
  const someInstance = Object.create(someMethods);
  someInstance.position = position;
  return someInstance;
};
const car1 = Car(5);
const car2 = Car(10);

여기서 Object.creat 텍스트는 메서드는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만듭니다.
상위클래스를 하위클래스로 확장할때 사용된다

Pseudoclassical

const Car = function (position) {
  this.position = position;
};
Car.prototype.move = function () {
  this.position += 1;
};
const car1 = new Car(5);
const car2 = new Car(10);

프로토타입(Prototype)을 이용하여 생성자 함수에 의해 생성된 모든 인스턴스는 프로토타입 객체의 메소드를 참조할 수 있다

JavaScript에서 Prototype은 무엇이고 왜 사용해야 하는지?

자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다

[[Prototype]] vs prototype 프로퍼티

[[Prototype]]

객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리키며 함수 객체의 경우 Function.prototype를 가리킨다.

prototype

함수 객체만 가지고있는 프로퍼티이며,
함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킨다.