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 을 사용함을 권장합니다.




+ Recent posts