[JS] Object-Oriented Progrmming

Fleuve·2020년 10월 28일
0
post-thumbnail

OOP란?

Object-Oriented Programming의 약자로 객체 지향 프로그래밍이라는 의미이다.
여기서 객체 지향 프로그래밍은 언어의 속성이 아닌 그냥 언어의 방법론이다.

객체 지향의 장점은 생산성이 높고 코드의 재사용성을 극대화하여 유지 보수가 용이하다는 점이다.

OOP의 특징

객체 지향 프로그래밍(OOP)에 특성은 Encapsulation(캡슐화), Inheritance(상속), Abstraction(추상화), Polymorphism(다형성) 이렇게 4가지가 있다.

1. Encapsulation(캡슐화)

const Car = function() {
 const someInstance = {};
 someInstance.position = 0;
 someInstance.move = function() {
   this.position++;
 }
 return someInstance;
}
const car = Car();
car.move();
console.log(car.position); // 1

위 예제와 같이 move 함수를 통해 someInstance.position의 값을 바꿀 수는 있지만 someInstance에 직접 접근을 할 수는 없다. 이렇게 캡슐화는 외부에서 함수로 변수의 값을 마음대로 바꿀 수 없도록 내부의 정보를 외부로부터 은폐하는 것을 말한다.

2. Inheritance(상속)

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

Car.prototype.move = function() {
  this.position++;
}

const car = new Car(1);
car.move();
console.log(car.position); // 2

자바스크립트에서는 상속이라는 개념이 없다. 하지만 protoclassical 방식을 통해 상속을 구현할 수 있다. 그리고 es6에 class라는 녀석이 새로 생겼다. 이 class 키워드를 사용하여 구현한다면 상속을 쉽게 구현할 수 있다.

3. Abstraction(추상화)

const Car = function() {
 const someInstance = {};
 someInstance.position = 0;
 someInstance.move = function() {
   this.position++;
 }
 return someInstance;
}
const car = Car();
car.move();
car.move();
car.move();
console.log(car.position); // 3

캡슐화와 같은 예제이지만 추상화는 우리가 move를 했을 때 어떻게 position이 1이 증가하는지를 알 수 없다. 이처럼 객체를 만들 때 복잡한 원리나 구동 방식을 사용자로부터 추상화시켜주는 작업이 중요한데 이 작업을 추상화라고 한다.

4. Polymorphism(다형성)

다형성은 하나의 메서드나 클래스가 있을 때 다양한 방법으로 동작하게 하는 것을 말한다.
부모 클래스를 대략 구성하고, 하위 클래스에서 변형하여 쓸 여지를 남겨 기존 소스 코드를 유연하게 재사용하여 더 간결하고 깔끔하게 코드를 추가할 수 있다.

JavaScript의 class

class는 하나의 정형화된 모델을 만들어 두고, 그 모델을 기반으로 한 인스턴스를 만드는 데 사용한다.

class를 선언한는 4가지 방식

1.Functional

const Car = function() {
  const someInstance = {};
  someInstance.position = 0;
  someInstance.move = function() {
    this.position++;
  }
  return someInstance;
}

Functional 방식은 말 그대로 함수를 이용하는 방식이다.

2. Functional shared

const extends = function(to, form) {
  for(const key in from){
   to[key] = from[key];
  }
}

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

const Car = function(position) {
  const someInstance = {
    position: position
  }
  extends(someInstance, someMethods);
  return someInstance;
}

functional shared 방식은 위 예제의 someMethods라는 객체에 있는 메서드들의 메모리 주소만을 참조하기 때문에 메모리 효율이 높아진다.

3. Prototypal

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

const Car = function(position) {
  const someInstance = object.create(someMethods);
  someInstance.position = position;
  return someInstance;

Prototypal방식은 Functional shared 방식과 유사하다. 하지만 object.create()를 통해 특정 객체를 prototype으로 생성해 주는 과정을 거친다.

4. Pseudoclassical

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

Car.protptype.move = function() {
  this.position++;
}

Pseudoclassical 방식은 prototype을 통해 추가하는 방식이다.
이 방식을 사용할 때 주의해야 할 점은 new 키워드를 사용하여 함수를 생성하여 사용해야 한다.

0개의 댓글

관련 채용 정보