[펌] 자바스크립트 정리. 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 ;

   }