javascript. javascript 에서의 oop

자바스크립트에서 특정 네임스페이스로 클래스를 선언하고 인스턴스 생성해서 사용하는 코드 예제를 만들어 보았습니다.


var somenamespace = {
  Rect : ( function RectClosure(){

  //private method
  function _intersectInner( left, top, right, bottom ){
     if( this.left < right && left < this.right && this.top < bottom && top < this.bottom ){
      if( this.left < left ) this.left = left;
      if( this.top < top ) this.top = top;
      if( this.right > right ) this.right = right;
      if( this.bottom > bottom ) this.bottom = bottom;
      return true;
     }
     return false;  
  }

   //constructor
   function Rect( left, top, right, bottom ){
    this.left = left;
    this.top = top;
    this.right = right;
    this.bottom = bottom;
   }

   //static method
   Rect.fromRect = function( rect ){
    return new Rect( rect.left, rect.top, rect.right, rect.bottom );
   }

   Rect.prototype = {
   
    //getter
    get width(){
     return this.right - this.left;
    },
   
    //getter
    get height(){
     return this.bottom - this.top;
    },
   
    //public method
    intersect : function( left, top, right, bottom ){
      //private method call
      return _intersectInner.apply( this, [ left, top, right, bottom ] );
    }
   }
   return Rect;

  } )()
};
console.log( new somenamespace.Rect( 10, 10, 30, 30 ).width );//output : 20



그럼 자바스크립트에서 클래스 상속은 어떤식으로 처리해야 할까요. 정해진 규칙이 있는건 아니지만, 제안되는 방법중 하나로 다음과 같은 형식이 있습니다.

function Util_inherit( sub, base, prototype ){
    sub.prototype = Object.create( base.prototype );
    sub.prototype.constructor = sub;
    for( var prop in prototype ){
        sub.prototype[ prop ] = prototype[ prop ];
    }
};

var BaseClass = ( function(){
    function BaseClass( number ){
        this.number = number;
    }
    BaseClass.prototype = {
        getNumber : function(){
            return this.number;
        }
    }
    return BaseClass;
} )();

var base = new BaseClass( 3 );
console.log( 'base getNumber return : ' + base.getNumber() );//output : 3

var ExtendedClass = ( function(){
    function ExtendedClass( number ){
        //call super constructor
        BaseClass.call( this, number );
    }
    var parent = BaseClass.prototype;
    Util_inherit( ExtendedClass, BaseClass, {
        //override super method
        getNumber : function(){
            return this.number + 1;
        },
        getNumberEx : function(){
            //call super method
            var num = parent.getNumber.call( this );
            return num + 2;
        }

    } );
    return ExtendedClass;
} )();

var extended = new ExtendedClass( 3 );
console.log( 'extended getNumber return : ' + extended.getNumber() );//output : 4
console.log( 'extended getNumberEx return : ' + extended.getNumberEx() );//output : 5


자바스크립트의 프로토타입 체인에 대한 내용은 아래 포스트를 참고하세요.

https://msdn.microsoft.com/ko-kr/library/hh924508(v=vs.94).aspx

객체가 특정 클래스의 인스턴스인지를 검사하기 위해서는 instanceof 연산자를 사용할 수 있습니다.

https://msdn.microsoft.com/ko-kr/library/zh0zb36z(v=vs.94).aspx


아래는 자바스크립트에서의 this 스코프와 bind() 메소드의 역할을 설명하기 위해 만든 간단한 예제코드입니다.

var name = "ABC";
function abc(){
    console.log( "This is " + this.name );
}

//전달된 오브젝트를 this 스코프로 바인드한 새로운 함수를 리턴합니다
var bcd = abc.bind( { name : "BCD" } );

abc();//output : This is ABC
bcd();//output : This is BCD


apply() 함수의 개념및 사용방법에 대해서는 아래 포스트에서 힌트를 얻을 수 있습니다.

http://stackoverflow.com/a/13735425