[Javascript VS ES6] Prototype vs Class

기존 자바스크립트에서는 객체를 구현하기 위해 prototype을 사용 했습니다.

ES6 에서 나온 class는 기존 객체지향 언어에서 제공하는 객체 생성 방식과 동일한 문법으로 가독성을 높이기 위해 고안된 문법 입니다.

// Javascript Prototype

var NumberPrototype = (function() {
    this.number = 0;
	
    // 생성자 함수
    function setNumber(num) {
        this.number = num;
    }
    
	// 객체 함수(메소드역할)
    setNumber.prototype.sum = function(num) {
        this.number += num;
    }

    setNumber.prototype.print = function() {
        console.log(this.number);
    }

    return setNumber;
}());

var numberPrototype = new NumberPrototype(10);
numberPrototype.print();
numberPrototype.sum(7);
numberPrototype.print();

1. 생성자 : property 함수 호출시 return 되는 생성자 함수를 생성 해 줍니다.  setNumber 

2. 객체 함수(메소드) :  {생성자 함수명}.prototype.{함수명}  형태로 선언해주면 객체 외부에서 함수를 실행해 객체 내부에 선언된 함수로 사용할 수 있습니다.

 

실행 순서

1.  var numPrototype = new NumberPrototype(10);  선언시 생성자 함수인  setNumber(num)  함수를 호출 해 객체를 생성과 동시에  this.number  멤버 변수에 전달 받은 10 값을 대입해 줍니다.

2.  numberPrototype.print();  호출시  setNumber.prototype.print()  함수를 호출하여 객체내 멤버 변수 인  this.member  값을 출력하게 됩니다.

3.  numberPrototype.sum(7);  호출시  setNumber.prototype.sum(num)  호출 하여 멤버 변수  this.number 값에 전달 받은 인자 값을 합산 해 줍니다.

// ES6 Class

class NumberClass {
    constructor(num) {
        this.number = num;
    }

    sum(num){
        this.number += num;
    }

    print() {
        console.log(this.number);
    }
}

var numberClass = new NumberClass(7);
numberClass.print();
numberClass.sum(20);
numberClass.print();

1. 생성자 : 클래스 선언시 constructor() 함수를 선언하여 해당 객체 맴버변수 선언 및 기본 호출 메소드를 호출 할 수 있습니다.

2. 메소드 : sum(num) 과 같이 메소드를 선언하여 객체 외부에서 함수를 실행해 객체 내부에 선언된 함수로 사용할 수 있습니다.

 

실행 순서

1.  var numberClass = new NumberClass(7);  선언시 생성자  constructor(num)  함수를 호출 해 객체를 생성과 동시에  this.number  멤버 변수에 전달 받은 7 값을 대입해 줍니다.

2.  numberClass.print();  호출시  print()  함수를 호출하여 객체내 멤버 변수 인  this.member  값을 출력하게 됩니다.

3.  numberClass.sum(20);  호출시  sum(num)  함수를 호출 하여 멤버 변수  this.number 값에 전달 받은 인자 값을 합산 해 줍니다.

 

참고 도서 : 초보자를 위한 리액트 200제