[Node] Prototype vs Class 차이점 알아보기

 

 

먼저 Prototype을 활용한 서버 생성 소스

const http = require('http');

// 서버 생성
const server = http.createServer((req, res) => {
    // 요청에 대한 결과를 보낼 때 200일 경우 정상 작동
    res.statusCode = 200
    // 해당하는 데이터로 어떠한 것을 보냈는지 명시적으로 선언
    res.setHeader('Content-type', 'text/html'); // html 문서를 리턴한다.
    // 종료
    res.end('<dvi>Hello World</div>');
})

// 명시적으로 포트를 외부에서 받음
//const port = process.env.PORT 

// 테스트 화면을 띄우기 위해 임의의 포트 번호 작성
const port = 3000;
server.listen(port, () => {
    console.log(`Server running at port ${port}`);
})
// Prototype이란?
// 기본적으로 어떠한 객체 또는 함수가 있을 때 기존의 속성들을 모두 그대로 복사하여 새로운 객체나 함수 
// 기존의 객체와 함수를 바탕으로 새로운 함수를 만드는 데 사용

// prototype은 화살표 함수를 사용하지 않고 기존 함수를 사용하는 것이 더 직관적
function fullstack (backend, frontend) {
    this.backend = backend
    this.frontend = frontend

    // prototype 명시적 선언
    // 내부 클로저 함수(함수 내부의 함수) 선언
    // 내부 함수가 외부 함수에 접근할 수 있다.

    // 화살표 함수에서의 this를 바인딩 할 수 없다.
    // 화살표 함수 내부의 this는 해당 내부의 this가 아닌 글로벌 객체의 this
    fullstack.prototype.setBackend = () => this.backend = backend;
    fullstack.prototype.getBackend = () => this.backend;

    fullstack.prototype.setFrontend = () => this.frontend = frontend; // 마지막 frontend는 파라미터로 받은
    fullstack.prototype.getFrontend = () => this.frontend;

}

const Fullstack = new fullstack('javascript(back)', 'javascript2(front)');
console.log(Fullstack.getBackend());
console.log(Fullstack.getFrontend());

 

다음은 Class를 활용한 소스

class fullStack {
    // 초기화
    constructor(backend, frontend) {
        this.backend = backend
        this.frontend = frontend
    }

    // function 키워드 없이 함수 정의
    // get 정의
    getBackend() {
        return this.backend
    }

    getFrontend () {
        return this.frontend
    }
    
    // 초기화 이후의 함수 호출로 인해 업데이트 될 수 있어 set 정의
    // 파라미터가 필요함
    // 이유? 해당하는 부분의 파라미터가 별도의 함수로 호출됨
    // contructor는 new 클래스로 선언될 때만... 
    setBackend (backend) {
        this.backend = backend
    }

    setFrontend (frontend) {
        this.frontend = frontend
    }
}

const FullStack = new fullStack('javascript(back)','javascript(front)')

console.log('set 이전(최초 생성 후 fullstack)')
console.log(FullStack);

FullStack.setBackend('back : js');
FullStack.setFrontend('front : js');

console.log('set 이후 각각 back / front')
console.log(FullStack.getBackend());
console.log(FullStack.getFrontend());

console.log('set 이후 fullstack)')
console.log(FullStack);

 

Class 사용 시 소스가 훨씬 간단해 지는 것을 알 수 있다.