본문 바로가기

Development/Javascript

[펌] 자바스크립트 정리. 6 - 자바스크립트 클래스의 서브클래스화

검색엔진을 뒤지면서 보다가 너무나 깔끔하게 정리된

자바스크립트가 있기에 퍼옴. GENERAL 님의 정리 감사합니다.

댓글은 아래 링크에 달아주세요~


링크 : http://blog.naver.com/minis24/80094251902

* 자바스크립트 클래스의 서브클래스 정의하기 
 
   자바스크립트는 프로토타입 기반의 상속을 지원하므로 프로토타입 객체를 
    알맞게 조작하여 서브클래스를 흉내낼수 있다.아래는 그 방법이다.
 
   1. 서브클래스의 생성자에서 슈퍼클래스의 생성자를 호출한다.
      이때, 슈퍼클래스의 생성자가 새로만든 객체의 메서드인것처럼 호출해야 한다.
 
   2. 프로토타입 객체를 설정한다.
       * 프로토타입객체를 반드시 슈퍼클래스의 인스턴스로 만들어 줘야한다.
       * 프로토타입 객체의 constructor 프로퍼티를 명시적으로 설정해 줘야한다.  
      
 
  ex)
      //슈퍼클래스 정의
      //이 클래스의 서브클래스를 정의한다.
      function Rectangle(w,h){
          this.width = w ;
          this.height = h ;
      }
   
     //슈퍼클래스의 프로토타입 객체에 area 프로퍼티 정의 및 초기화
     Rectangle.prototype.area = function() {
         return this.width * this.height ;
     }
 
     //서브클래스의 생성자에서 슈퍼클래스의 생성자를 호출한다.
     //이 때, 슈퍼클래스의 생성자가 새로만든 객체의 메서드인것처럼 호출한다.  
     //생성자 체이닝            
     function subRectangle ( x , y , w , h ){
         Rectangle.call ( this , w , h ) ;
            //= subRectangle.Rectangle(w,h);
            //= subRectangle.width = w ;
            //= subRectangle.height = h ;
 
            //this 객체는 Rectangle 생성자함수가 소속되어 호출될 객체이다. (subRectangle 생성자)
            //Rectangle 생성자 함수를 this 객체의 메서드인것처럼 호출
 
                ※ call ()
                     첫번째 전달인자 : 함수가 소속되어 호출될 객체 지정
                     함수의 몸체 안에서 this 키워드의 값이 된다.
                   
                      나머지 전달인자 : 함수가 호출될때의 전달인자.
         this.x = x ;
         this.y = y ;
     }
    
     //서브클래스의 프로토타입 객체를 명시적으로 슈퍼클래스의 인스턴스로 설정한다.
     //기본 프로토 타입 객체를 사용하면 Objec 클래스의 서브클래스가 된다.
     //프로토타입 객체 역시 하나의 객체이므로 Object() 생성자를 사용하여 만들어지기 때문에.
 
     //new 연산자는 빈 객체를 생성한 후 생성된 객체의 프로토타입 객체를 설정한다.
     //이 때 생성된 객체는 자신을 만들어낸 생성자의 prototype 프로퍼티 값을
     //자신의 프로토타입객체로 설정한다.
    
     //subRectangle클래스의 프로토타입객체가 Rectangle 클래스의 인스탄스 이므로
     //subRectangle은 프로토타입 객체인 Rectangle 인스탄스의 프로퍼티를 상속받게 된다. 
    subRectangle.prototype = new Rectangle();
 
     //subRectangle.prototype 객체가 Rectangle 클래스의 인스턴스 이므로
     //subRectangle 클래스의 모든 인스턴스는 프로토타입 객체인 Rectangle 인스탄스의
     //모든 프로퍼티를 상속받게 될것이므로, 필요없는 프로퍼티는 삭제하여 준다.
    delete.subRectangle.prototype.width ;
    delete.subRectangle.prototype.height ;
    
    //subRectangle 클래스의 프로토타입 객체가 Rectangle() 생성자를 사용해서 만들어졌으므로
    //constructor 프로퍼티는 Rectangle()생성자를 참조한다.
    //constructor 프로퍼티를 수정하여 준다.
    subRectangle.prototype.constructor = subRectangle ;
   
    이제 subRectangle 클래스의 프로토타입 객체가 만들어 졌으며,
    여기에 새로운 메서드를 추가할 수 있다.
 
 
 

* 생성자 체이닝

 

    서브클래스의 생성자 함수 내에서 상위클래스의 생성자를 명시적으로 호출하는 것을

    생성자 체이닝 이라고 한다.

 

    call() 함수를 써서 생성된 객체의 메서드인것 처럼 호출했었는데 다음처럼 간단하게 고칠 수 있다.

 

    //상위클래스에 대한 참고 저장

    subRectangle.prototype.superclass = Rectangle ;

 

   function subRectangle( x , y , w ,h ){

       // 프로토타입 객체의 프로퍼티인 superclass 에 Rectangle 참조를 저장하여

       // subRectangle 클래스의 메서드화 하여 실행함.

       this.superclass (w , h) ;

       this.x = x ;

       this.y = y ;

   }