OOP 객체 지향 programming

OOP

• object oriented programming

  관계성 있는 객체들의 집합, 변수와 함수를 의도한 역할에 따라 각각의 객체로 나누어 하나의 program으로 추상화하여 사용하는 programming pradigm이다.

장점

• 유연하고 유지 보수성이 높다.
• code를 분석하고 이해하기 쉽다.

기본 구성 요소

• Class : 상위 객체
• Object(Instance) : 하위 객체
• Constructor : 생성자
• Property : 속성
• Method : 함수

Custom object

Javascript에서는 class 기반이 아닌 prototype을 기반으로 하여 oop가 가능하게 했다.

• constructor, function을 사용한다.

// prototype class 생성
function Prototype(property) {
  this.property = property;
}

/** 
반드시 prototype에 속성을 할당해 주어야 한다. 그렇지 않을 경우 단일 객체의 단일 속성으로 상속되어 상위 객체와 하위 객체 사이의 연결이 없다.
class.prototype.method = function() {} 
**/
Prototpye.prototype.method = function() {
  console.log(this.property);
};

• constructor를 통한 instance 생성

// class를 위와 같이 정의한다. 

// new 연산자를 사용하여 instance를 생성한다. 
let instance = new Prototype("instance");
instance.method(); // "instance"

let instance2 = new Prototype("instance2");
instance2.method(); // "instance2"

// 또는 

function Instance(property) {
  // 상위 class의 속성을 현재 Instance에 재할당 한다. 
  Prototype.call(this, property);
}

Instance.prototype = new Instance("instance");

Prototype 생성자로 instance를 생성하였지만 instance 또한 생성자가 될 수 있다.

// 상위 class 확장
Instance.prototype.constructor = Instance;

let childInstance = new Instance("childInstance");

childInstance.method(); // "childInstance"

• class 문법

ES6에서 class 문법이 추가 되었지만 여전히 prototype 기반 class이고 class 문법은 함수다.

• 따라서 함수 표현식과 함수 선언으로 정의할 수 있다.

• class 선언

class Class {
  constructor(property, property2) {
    this.property = property
    this.property2 = property2
  }
  
  method() {
    console.log(this.property, this.property2);
  }
}

let newClass = new Class("name", "instance");
newClass.method(); // "name", "instance"

• class 표현식

let Class = class {
  constructor(property, property2) {
    this.property = property
    this.property2 = property2
  }
  
  method() {
    console.log(this.property, this.property2);
  }
};

let newClass = new Class("name", "instance");
newClass.method(); // "name", "instance"

• extends를 통한 상속

class Class {
  constructor(property, property2) {
    this.property = property
    this.property2 = property2
  }
  
  method() {
    console.log(this.property, this.property2);
  }
}

class newClass extends Class {
  constructor(property, property2) {
    super(property, property2)
  }
  
  method() {
    console.log("instance by extends class") 
  }
};

let instance = new newClass("name", "instance");
instance.method(); // "instance by extends class"

OOP 특징

• Inheritance, 상속
  : 상위 객체가 가지고 있는 property 또는 method를 하위 객체로 상위 객체는 Parent, 부모 객체, 하위 객체는 Child, 자식 객체라고 부른다. 부모 객체를 통해 생성된 자식 객체는 prototype을 통해 부모가 가지고 있는 property 또는 method를 상속받고 prototype으로 연결되어 있으면 항상 참조하고 있어 부모 객체의 property가 바뀔 경우 자식 객체의 property도 값이 바뀔 수 있다.

class Parent {
  constructor(name) {
    this.name = name;
  }
  method() {
    console.log(`I'm ${this.name}`)
  }
}

let child = new Parent("child");
child.method(); // "I'm child"

• Encapsulation, 캡슐화
  : prototype으로 연결된 객체들 끼리는 상속받은 prototype property에 접근이 가능하고 변형과 재할당이 가능하지만 scope 외부 code에 의해서는 접근이 불가하다.

• Abstraction, 추상화
  : 현재 작업하고 있는 부분을 추상화, 목적에 따라 역할을 나누어 객체가 가지고 있어야 할 prototype property를 modeling하는 과정

• Polymorphism, 다형성
  : class의 prototype property은 prototype에 선언되어 있어, 다른 class라도 같은 이름의 property 또는 method를 선언할 수 있다.

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create