[JavaScript] 생성자와 프로토타입의 차이 (Difference between constructor and Prototype)

JavaScript 에서 생성자와 프로토타입은 겉으로는 비슷하게 동작하는 것으로 보이지만

실제로 내부적으로는 많은 다른 동작이 있습니다.

해당은 new를 통해서 생성자 함수로 만들어서 사용 하였습니다.

function SuperConstructor(arg){

    this.id = arg;
    
    this.getId = function(){
            return this.id;
    }
    this.setId = function(_id){
        this.id = _id;        
    }
}

var gdl = new SuperConstructor('q1w2e3r4');
console.warn(gdl.getId());    //q1w2e3r4

var gdl2 = new SuperConstructor('qwer1234');
console.warn(gdl2.getId()); // qwer1234

해당 코드를 Prototype으로 변경 해보겠습니다.

function SuperConstructor(arg){

    this.id = arg;
    
}
SuperConstructor.prototype.getId = function(){
			return this.id;
}
SuperConstructor.prototype.setId = function(_id){
			this.id = _id;
}
var gdl = new SuperConstructor('q1w2e3r4');
console.warn(gdl.getId()); // q1w2e3r4

var gdl2 = new SuperConstructor('qwer1234');
console.warn(gdl2.getId()); // qwer1234

두개의 코드 다 결과가 같습니다. 

하지만 내부적으로는 큰 차이가 하나 있습니다.

프로토타입의 경우에는 프로토타입 체이닝이라는 변수가 존재합니다. 

1번째 방식을 사용하게 되면 

메모리 사용되는 폼은 이와 같습니다.

( gdl - getId, setId, id) ( gdl2 - getId, setId, id) ( SupterConstructor - getId, setId, id)

2번째 방식을 사용하게 되면

메모리 사용되는 폼은 이와 같습니다.

(gdl - id)  ↘
                ->   (SuperConstructor -prototype.getId, prototype.setId)
(gdl2 - id) ↗  

와 같이 되며 gdl .setId일시 프로토타입 체이닝을 통해서 -> SupterConstructor 에 있는 값을 찾아가며

해당 함수에서 this.id로 지정이 되었기 때문에 this는 체이닝으로 부터 넘어온 gdl 이 된다.

그러므로 gdl 에 있는 id값을 지정하게 됩니다.

2번의 경우는 확실히 프로토타입 함수가 프로토타입 체이닝으로 인해서 중복 호출에 대한

최소화가 이루어졌기 때문에 

OOP 와 같은 프로그래밍을 하기 위해서는 Prototype 을 사용함을 권장합니다.