본문 바로가기

JSON/Javascript Class Declarations

Javascript Class Declarations

Javascript 에서 클래스 선언, 객체생성 및 객체 사용의 예

<script>

 /* 클래스 선언과 함께 멤버함수도 선언한다 */
 function Gugu(dan){ // Gugu 는 클래스의 이름이 된다
  this.dan = dan;
  this.getGugu = getGugu; // 멤버함수 등록
 }

/* 멤버함수 선언 */
 function getGugu(){
  gugu = "";
  for(var i=1;i<=9;i++){
   gugu += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
  }
  return gugu;
 }

 /* 인스턴스 생성 및 사용 */
 var g = new Gugu(5);
 var txt = g.getGugu();
 alert(g.dan+"단보기\n\n"+ txt);

</script>



 클래스의 이름을 선언하는 다른 방법

<script>
 /* 클래스 선언 */
 Gugu = function (dan){
  this.dan = dan;
  this.getGugu = getGugu;
 }

 function getGugu(){
  gugu = "";
  for(var i=1;i<=9;i++){
   gugu += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
  }
  return gugu;
 }

 /* 인스턴스 생성 및 사용 */
 var g = new Gugu(5);
 var txt = g.getGugu();
 alert(g.dan+"단보기\n\n"+ txt);
</script>




클래스 이름을 선언하는 또 다른 방법

<script>

 /* 클래스 선언 */
 Test = function Gugu(dan){
  this.dan = dan;
 }

 Test.prototype = {
     getDan: function (){
       return this.dan;
     },

     getGugu: function(){
        gugu = "";
        for(var i=1;i<=9;i++){
          gugu += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
        }
       return gugu;
   }
 }

 /* 인스턴스 생성 및 사용 */
 var g = new Test(5);
 var txt = g.getGugu();
 alert(g.getDan()+"단보기\n\n"+ txt);
 
</script>




 클래스 선언 후에 멤버함수를 추가하는 경우

<script>

 /* 클래스 선언 */
 Gugu = function (dan){
  this.dan = dan;
 }

 /* 클래스 선언 후에 멤버함수를 추가하려면 prototype 속성을 사용 */
 Gugu.prototype.getGugu = function(){
  gugu = "";
  for(var i=1;i<=9;i++){
   gugu += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
  }
  return gugu;
 }

 /* 인스턴스 생성 및 사용 */
 var g = new Gugu(5);
 var txt = g.getGugu();
 alert(g.dan+"단보기\n\n"+ txt);
</script>



Object 객체에 동적으로 속성과 함수를 추가하고 사용하는 예
<script>
 var gugu = new Object();
 gugu.dan = 5;
 gugu.getGugu = function(){ // 멤버함수를 추가할 때 prototype 속성을 사용하지 않음 주의
  var str = "";
  for(var i=1;i<=9;i++){
   str += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
  }
  alert(str);
 }
 gugu.getGugu();
</script>



JSON 방식으로 클래스를 선언할 때는 다수개의 함수를 한꺼번에 선언할 수 있는 장점이 있다 (아래 참조)

<script>

 /* 클래스 선언 */
 function Gugu(dan){
  this.dan = dan;
 }

 /* JSON 방식으로 2개 이상의 함수를 동시에 클래스에 추가함 */
 Gugu.prototype = {
  getDan : function (){
   return this.dan;
  },

  getGugu : function(){
   gugu = "";
   for(var i=1;i<=9;i++){
    gugu += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
   }
   return gugu;
  }
 }

 /* 인스턴스 생성 및 사용 */
 var g = new Gugu(5);
 var txt = g.getGugu();
 alert(g.getDan()+"단보기\n\n"+ txt);
 
</script>



 패키지 개념을 적용한 클래스의 선언

<script>

 /* 패키지 선언 */
 var obj = new Object();
 obj.util = new Object();
 
 /* 패키지 안에 클래스 선언 */
 obj.util.Gugu = function Gugu(dan){
  this.dan = dan;
 }
 
 obj.util.Gugu.prototype = {
    getDan: function (){
      return this.dan;
    },

    getGugu: function(){
      gugu = "";
      for(var i=1;i<=9;i++){
       gugu += this.dan + " x " + i + " = " + (this.dan*i)+"\n";
      }
      return gugu;
   }
 }
 /* 인스턴스 생성 및 사용 */
 var g = new obj.util.Gugu(5);
 var txt = g.getGugu();
 alert(g.getDan()+"단보기\n\n"+ txt);
 
</script>