Javascript – Class(클래스)

by Posted on
Class

Javascrit 에서 class 정의 생성에 대한 방법에 대해 알아본다.
클래스 예제가 가장많이 나오는 animal 로 한번 알아보자

<script language=”javascript”>

// “Animal( )”  가아니라 “Animal” 이다 클래스는 함수아니라서 파리미터도 없다
class Animal {   
   
    // 멤버변수 Constructor(생성자) 밖에서 선언하기!
    // javascript 에서는 var , let 함수로 멤버변수 선언을 못함 – 오류남   
    // let legs;  
    // var legs;
// const legs;    // 멤버변수를 생성자 밖에 선언하는 방법은 var  , let  , const 쓰지않고
    // 그냥변수 명만 쓰면 선언됨
     legs;
     sounds;
     isTale = true;

    constructor( l , s , t , r , f)
    {  
        // 생성자 안에서 멤버 변수를 선언할때는 let, const ,var 가능
// 선언 후 this 접근  생성자 내부에 선언해도 멤버변수로 사용가능
        let legs;
        let sounds;
        let isTale;
         
        this.legs = l;
        this.sounds = s;
        this.isTale = t;
       
        // 변수 선언 안하고 바로 this 로 접근해도 선언없이 멤버변수가 선언&할당됨
        // canRun , canFly 는 선언하지 않았음
        this.canRun = r;
        this.canFly = f;
    }
   
   
    //  Method(메서드)
    // ★ 메서드 / 프로퍼티에는 function 을 붙이지 않는다.
     outSound()
     {
        console.log(this.sounds)
     }
     //  프로퍼티 선언하기    getter , setter 설정
// set 속성명() { } / get 속성명(value) {return value;} 
     // 일반적으로 프로퍼티 명은 변수명과 같게 코딩을 하는데          
     // 변수명과 프로퍼티 명이 같아 발생하는Call stack Exceeded 발생!
     // 그래서 프로퍼티명을 다르게 하거나,
     // 아니면 멤머변수 앞에 ‘_’ 를 붙여 사용한다.
     
     get legs()
     {
        return this._legs;

     }

     set legs(value)
     {       

           // 오류발행 : Maximum call stack size exceeded

           // 멤버 변수 legs 에 값을 할당 하려했지만,
           // 프로퍼티 legs 가 자신을 계속 callback 호출하여 오류가 발행
           // this.legs = value;  – 자기 자신 legs(value) 를 계속 호출함
           // 아래와 같이 프로퍼티와 멤버변수앞에 ‘_’ 사용하면 this.legs 와 같은효과
           this.legs = value;  // 오류발행 : Maximum call stack size exceeded
           this._legs = value;       
     }

}

 

// set , get  프로퍼티 는 함수가 아니므로,  멤버변수처럼 접근함
// set 프로퍼티 접근 : cat.legs = 100;
// get 프로퍼니 접근 : cat.legs;

 

let cat =  new Animal(4 , “야옹” , true  , false);  // 생성과 함께 Constuctor 호출

console.log(“legs : ” + cat.legs)  // 속성은 멤버 변수처럼 접근

cat.legs = 100;  // 속성 할당         // 속성은 멤버 변수처럼 접근

console.log(“legs : ” + cat.legs)  // 속성은 멤버 변수처럼 접근

 

</script>

멤버변수를 직접변경하지, 구지 프로퍼티를?
여기서 잠깐 한 가지를 집어 보고가자 , 가끔 멤버변수를 직접 수정해도되는데
왜 구지  번거롭게 프로퍼티를 작성해서 해야하는지 궁금해하는사람들이 있다.

아래소소를 보자


class Test {
    
       constructor( no , nm)
       {
               this.myNo = no;
               this.myName = nm;
       }
       
       getMyNo()
       { 
             return this.myNo;
       }
}

var myObj = new Test(1 , “test”);
myObj.myNo = 10;  // 멤버변수에 직접할당 – 프로퍼티가 작성도 피료없고 편함
console.log(this.getMyhNo());

// 그런데, 만약에 할당되는 멤버변수에 제어를 하고싶어지만 문제가 달라진다.
// myNO 에  1 ~ 10 까지만 들어오게 해야한다면,,,

var inputNo;
inputNO = inNo;  // 어딘가에서 No를 받아오고

var myObj = new Test(1 , “test”);

if (inputNo  >= 1 and inputNo <= 10)  // 직접 중간에 제어문을 넣어 제어해줘야함
       myObj.myNo = 10;
else
      console.log(“1 ~ 10입력만 가능”);”

console.log(this.getMyhNo());

위와 같이 조건문을 직접 작성해야하고 저 클래스를 사용하는 모든 개발자들은
제어문을 넣어 체크해줘야한다 간혹? 까먹을수도있겟지,,

class Test {
    
       constructor( no , nm)
       {
               this.myNo = no;
               this.myName = nm;
       }

      set myNo(v)
      {
             // 이렇게 제어를 프로퍼티 안에두고
if ( v  < 1 && v > 10)
                        this._myNo = -1;  // -1 에러코드로 지정함 또는 null
                    // throw exception()  //  예외 발생을 해도 되고
// console.log(“1 ~ 10 까지만 가능”)   // 오류메시지도가능
             else 
                     this._myNo  = v;
      }
      
      get myNo()
       {
                return this._myNo;     
       }
}

var myObj = new Test(1 , “test”);
myObj.myNo = 100;  // myNo 프로퍼티에 따라 체어가됨
console.log(this.getMyhNo());

멤버변수를 직접접근하면서 발생하는 생각지도 못한 오류에 대응함과
제어 코드를 클래안에 두어 객체 사용시의 처리를 제어하지 않아도되는 깔끔함,,
그리고 , 무엇보다 가장 큰 이유는  캡슐화(encapsulation)이다.

상속(inheritance)

javascript의class 에서도 다른 언어와 마찬가지로   상속을 지원한다.

<script language=”javascript”>

class Animal {   
   
        // 멤버변수 선언 & 초기화
        legs;
        sounds;
        isTale;
        canRun = false;
        canFly = false;

        constructor( l, s, t, r ,f)
        {
            console.log(“animal constructor 실행”);

this.legs = l;
            this.sounds = s;
            this.isTale = t;
            this.canRun = r;
            this.canFly = f;        

        }

        doRun()
        {
            if (this.canRun)
                console.log(“달릴 수 있음”);
            else
                console.log(“달리지 못함”)
        }
        doFly()
        {
            if (this.canFly)
                console.log(“날 수 있음”);
            else
                console.log(“날지 못함”)
        }
        doSounds : function()  // 이런식 메서드 구현도 가능함
        {
            console.log(this.sounds)
        }
   
}

     // 고양이과 동물을 포함하는 클래스 생성  Animal 상속 받는다.
     // 부모 클래스(Animal) 에서 구현된 모든 것을 상속받는다
// 상속은 extends 키워드로 받음

 

    class kindOfCat extends Animal {
   
        constructor( l, s, t, r ,f)
        {

            console.log(“Cat constructor 실행”)

            super(l, s, t, r ,f); // 상속 받음 부모의 생성자호출하여 변수 초기화

            this.legs = l;
            this.sounds = s;
            this.isTale = t;
            this.canRun = r;
            this.canFly = f;  

        }

 

        // overriding : 함수 재정의를 통해 다시 KindOfCat 클래스에 맞게 재구현
        doFly()
        {
            console.log(“무조건 날수없음”)
        }
    }
    var myCat = new kindOfCat(4,”냐옹”,true , true ,false);
    myCat.doSounds();  // 부모(animal)에서 받은거 
    myCat.doRun();        // 부모(animal)에서 받은거 
    myCat.doFly();          // 내(kindOfCat )에서 override  한 doFly 
</script>

Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다