OOP 01: 객체지향 프로그래밍의 컨셉

이번주는 객체지향 프로그래밍에 관해 공부 중. 객체와 프로토타입의 개념은 좀처럼 이해하기가 어려웠는데, 이후의 과제를 해내려면 꼭 알아야 할 내용이라서 주요 개념과 특징을 정리해본다. 

Object-Oriented Programming 이란?

• '객체지향프로그래밍' 이라고 하는데컴퓨터 프로그래밍의 패러다임 중 하나다.
• 인간이 세상을 인식하는 방식으로 접근한 프로그래밍 방법론이다. 
  - 인간은 머릿속에 가진 특징을 가진 추상적 이미지로 세상을 인식함. 현실 세계의 여러 크기와 컬러의 사과를 사과라고 인식함. 그것이 클래스인가..
• OOP의 구성으로는 Class와 Object(Class의 인스턴스), Method가 있다. Car 라는 클래스를 예를 들면,
  - Class: 자동차 생산을 위한 청사진(블루프린트, 원형).
  - Object: 청사진의 속성과 기능을 담아 만들어진 구체적인 생산물(실체, 브랜드와 모델명을 가진 특정 자동차)
  - Method: 자동차가 가지는 전진, 후진, 정지와 같은 기능들.

 

OOP의 컨셉(특징)

• Encapsulation 캡슐화 : 
  데이터 구조와 데이터를 다루는 방법을 결합시켜 묶는 것. 역할을 수행하기 위한 목적에 부합하는 기능들을 묶는 것.
  객체내에 관련된 내용과 그 내용의 메소드를 캡슐처럼 하나로 묶음.
• Abstract 추상화 :
  추상화란 공통적인 특징을 추출하는 것.
  객체들의 공통적인 특징을 바탕으로 프로퍼티와 메소드를 정의하는 작업.
• Inheritance 상속화 : 
  상위 개념의 속성을 물려받는 것. 클래스의 의존관계는 코드 재사용성을 높혀줌.
• Polymorphism 다양화 : 
  공통된 인터페이스를 사용해 하나 이상의 기능을 수행할 수 있다. 
  HTMLElement와 각 태그의 render()의 관계.

 * 처음에 캡슐화와 추상화가 분명히 구분되지 않았다. 자료들을 더 찾아보는 중.

 

 

Instantiation Patterns: JS에서 Object를 생성하는 네 가지 방법

비효율 적인 순서대로 정리하면,

1. Functional

let Car = function(position) { 
  let someInstance = {};
  someInstance.position = position;
  someInstance.move = function() {
    return this.position += 1;
  }
  return someInstance;
}

let myCar = Car(3);
myCar.move(); //한 번 실행
console.log(myCar.position) //4

이렇게 하면 인스턴스 마다 같은 메소드를 가지고 있으므로 불필요한 메모리를 차지하게 된다. 이것을 메소드를 함께 쓰는 방식으로 업그레이드 한 방법이 Functional Shared.

 

 

2. Functional Shared

let extend = function(to, from) {
  for(let key in from) {
    to[key] = from[key];
  }
}

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

let Car = function(position) {
  let someInstance = {};
  someInstance.position = position;
  extend(someInstance, someMethods);
  return someInstance;
}

let myCar = Car(3);
myCar.move();
console.log(myCar.position) //4

공통된 메소드를 별도의 객체에 정의하고 해당 메소드의 주소만 참조하기 때문에 메모리 효율이 좋아진다. 하지만 코드가 길다. 같은 역할의 코드를 프로토타입을 활용한 방법이 Prototypal.

 

3. Prototypal

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

let Car = function(position) {
  let someInstance = Object.create(someMethods); //extend 대신 요렇게!
  someInstance.position = position;
  return someInstance;
}

let myCar = Car(3);
myCar.move();
console.log(myCar.position) //4

Object.create()는 특정 객체를 프로토타입으로하는 새로운 객체를 생성해주는 함수다. 하지만 더 간단한 방법이 있으니 실제로는 Pseudoclassical 방법을 활용하게 될 것 같다. 바로 this와 prototype.

 

4. Pseudoclassical:

인스턴스를 생성할 때 new 연산자를 사용한다. 

let Car = function(position) {
  this.position = position;
}

Car.prototype.move = function() { //Car의 프로토타입으로 메소드를 정의
  return this.position += 1;
}

let myCar = new Car(3); //new를 붙인다.
myCar.move();
console.log(myCar.position) //4

 

오늘은 여기까지.

 

레퍼런스: 

Object-oriented Programming in JavaScript: Made Super Simple | Mosh

 

---

 

지칠 땐 고양이 젤리..