오랜만에 글을 올리는 것 같군요.. ^^

한창 더울때 post를 시작한 것 같은데 벌써 날이 제법 찹니다.. 감기조심하세요.

오늘은 제목처럼 자바스크립트에서 주로 사용하는 객체 생성방식에 대해서 알아보려고 합니다. 또한 생성할시에 필요한 메모리도 한번 체크해보도록 합시다.

자바스크립트에서는 클래스라 불리우는 객체를 두가지 방식으로 선언할 수 있습니다.
첫번째는 function으로만 선언하는 방식이고, 다른하나는 function과 prorotype을 이용하여 선언하는 방식이 있습니다.

function Foo(){
   this.name = "foo";

   this.getName = function(){
      alert(this.name);
   };

   this.setName = function(name){
       this.name = name;
    };

    this.act = function(){
 
    }
}

보시다 시피 위의 소스는 function으로 Foo객체(클래스)를 생성한 모습입니다. 일반적으로 위의 방식을 주로 사용합니다.

그리고 저는 후자의 방식을 사용하는데요... 소스는 아래와 같습니다.

function Foo(){
   this.name = "foo";
}

Foo.prototype = {
   getName : function(){
      alert(this.name);
   },
 
   setName : function(name){
      this.name = name;
   },
 
   act : function(){
 
   }
}

먼저 function으로 필요한 부분은 멤버로 넣고 각 인스턴스마다 공통으로 사용될 것같은 놈들만 골라서 prototype으로 처리했습니다.
(여기서는 그냥 가상이므로 getName과 setName, act메소드에 대한 내용은 언급하지 않습니다)

그리고 아래의 소스를 돌렸습니다...위의 두가지 방식의 소스 모두...

for(var i=0; i<10000; i++){
    eval("f_"+i+" = new Foo();");
}

결과는 어떻게 될거라 생각하나요??


우선 아무것도 없을때의 화면입니다.


두번째는 function으로 선언하고 위의 소스를 돌렸을때의 화면입니다.



다음은 prototype과 function을 함께 사용했을때의 화면입니다.



예상하셨나요??

제가 위에도 잠시 언급했지만.. function으로 생성된 인스턴스는 해당 클래스에 존재하는 모든 멤버를 모두 설정하여 생성됩니다.

허나, 필요한 멤버는 function으로.. 각 인스턴스마다 공유될 멤버 메소드같은 경우는 prototype으로 선언하면 function으로 생성된 인스턴스는 function의 멤버인 하나만 설정하여 생성되고 나머지 필요한 것은 Foo로부터 찾아서 사용하게 됩니다.

많은 분들이 function형태의 클래스 생성과 prototype으로 생성한 것과의 차이점을 간과하시는 듯하여 작성한 post가 되겠습니다.

갑자기 추워진듯 한데 감기조심하시구요. 다음 포스트때 다시 뵙도록 하겠습니다.

posted by blankus