[JS] 객체 지향 프로그래밍(OOP) 팩토리 함수, 생성자 함수, class

자바스크립트는 멀티-패러다임 언어로 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 언어다

자바스크립트는 이미 생성된 인스턴스의 자료구조와 기능을 동적으로 변경할 수 있다는 특징이 있다. 객체 지향의 상속, 캡슐화(정보 은닉) 등의 개념은 프로토타입 체인과 클로저 등으로 구현할 수 있다.

 

자바스크립트 객체지향 방법중 팩토리, 생성자, 클래스에 대해 알아보려고 한다.

 

# 팩토리 함수

function makeColor(r, g, b){
    const color = {}
    color.r = r;
    color.g = g;
    color.b = b;
    color.rgb = function(){
        const {r,g,b} = this; // 구조 분해
        return `rgb(${r}, ${g}, ${b})`;
    }
    color.hex = function(){
        const {r,g,b} = this; // 구조 분해
        return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); // 컬러 16진수로 변환
    }
    return color;
}

const myColor = makeColor(255, 255, 13);

여기서 알아야 할 것은 함수가 객체를 만들어주는 것이다.

myColor 객체를 만들어놓고 활용이 가능하다

 

변경해서 사용 가능하다.

 

 

# 생성자 함수

생성자 함수에서는 new라는 키워드가 나온다.

 

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

new operator - JavaScript | MDN

공식문서를 보면

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const car1 = new Car('Eagle', 'Talon TSi', 1993);

console.log(car1.make);
// Expected output: "Eagle"

return 값이 있지않다.

** (보통 클래스나 생성자 함수를 표시할 때는 대문자를 쓴다고 한다.)

 

대신 아래 new라는 키워드를 쓰는데

이 때 무슨일이 발생하냐면

1. Foo.prototype 을 상속하는 새로운 객체가 하나 생성된다.

2. 명시된 인자 그리고 새롭게 생성된 객체에 바인드된 this와 함께 생성자 함수 Foo가 호출된다.new Foo는 new Foo()와 동일하다. 즉 인자가 명시되지 않은 경우, 인자 없이 Foo가 호출된다.

3.생성자 함수에 의해 리턴된 객체는 전체 new 호출 결과가 된다. 만약 생성자 함수가 명시적으로 객체를 리턴하지 않는 경우, 첫 번째 단계에서 생성된 객체가 대신 사용된다.(일반적으로 생성자는 값을 리턴하지 않는다. 그러나 일반적인 객체 생성을 재정의(override)하기 원한다면 그렇게 하도록 선택할 수 있다.)

 

팩토리 함수로 짠것을 생성자 함수로 바꿔보면

 

function makeColor(r, g, b){
    this.r = r;
    this.g = g;
    this.b = b;
}
makeColor.prototype.rgb = function(){
    const {r,g,b} = this; // 구조 분해
    return `rgb(${r}, ${g}, ${b})`;
}
makeColor.prototype.hex = function(){
    const {r,g,b} = this; // 구조 분해
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); // 컬러 16진수로 변환
}

const myColor = new makeColor(255, 255, 13);
const myColor2 = new makeColor(233, 1313, 13);

팩토리 함수보단 나아진거 같지만

뭔가 그룹화 되지 않은 느낌이 좀 든다.

그래서 나온게 class 이다.

 

# Class

class Color {
	constructor(){} // 즉시실행
}

기본 구조는 이렇다.

class 키워드와 클래스명(대문자)와

constructor가 있다. constructor는 Color가 새로 생성될 때마다 즉시실행된다.

 

생성자 함수로 짠 코드를

class 형식으로 바꿔보면

class Color {
    constructor(r, g, b){ // 새로 만들어 질때마다 즉시 실행
        this.r = r;
        this.g = g;
        this.b = b;
    } 
    rgb(){
        const {r,g,b} = this; // 구조 분해
        return `rgb(${r}, ${g}, ${b})`;
    }
    hex(){
        const {r,g,b} = this; // 구조 분해
        return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); // 컬러 16진수로 변환
    }
}

const white = new Color(255,255,255);
const red = new Color(255,0,0);

class안에서 함수를 매서드로 표현이 가능하다

서로 접근하기도 쉽다.

 

생성자 함수로 했을 때보다 뭔가 보기 편해진거 같다.