1. Number 클래스 확장

현재 책의 버전은 1.5 이지만 신버전이 속속 나오고 있어서 이문서를 작성하는 현재 가장 최신 버전인 1.6을 기준으로 기술 하겠다.

1. 메서드 목록

지금부터 알아볼 메서드는 다음과 같다.(메서드와 함수의 차이를 모르겠다면 자바스크립트 기본설명을 참조 하세요)

일단 1.5 버전과의 차이점을 보여주면 toPaddedString 메소드를 통해서 자체적으로 코드의 재활용성을 높였다.

 
    toPaddedString: function(length, radix) {
       var string = this.toString(radix || 10);
       return '0'.times(length - string.length) + string;
    }

1.5 에서는 toColorPart를 처리 하시 위해서 다음과 같은 형태로 코드를 기술 하였다.

 
  toColorPart: function() {
    var digits = this.toString(16);
    if(this < 16) return '0'+digits;
    return digits;
  }

위와 같은 코드가 1.6에서는 다음과 같이 변경 되었다.

 
  toColorPart: function() {
    return this.toPaddedString(2, 16);
  }

2. 메소드별 사용법 및 특징

해당 Number 클래스는 Object.extend를 통하여 prototype된 Number 메소드를 복사한다.

• toColorPart : 10진수를 16진수로 변환하여 반환한다.

 
 $('view1').update('15 : ' + Number(15).toColorPart()); // 15 : Of
 $('view2').update('16 : ' + Number(16).toColorPart()); // 16 : 10

• succ: 지정한 값에 1을 더하여 10진수 값으로 반환한다.

 
 $('view1').update('10 진수 87   : ' + Number(87).succ()); // 10 진수 87   : 88
 $('view1').update('10 진수 87   : ' + (87).succ());       // 10 진수 87   : 88 만연 ()를 빼면 에러가 생긴다. :D
 $('view2').update('16 진수 0X57 : ' + 0X57.succ());       // 16 진수 0X57 : 88

• times : 지정한 값만큼 iterator 함수를 실행한다.

 
   var timesValue = 3;
   timesValue.times(function(num) {$('view' + (num + 1)).update('반복차수 : ' + num)} );

혹시나 해서 적어놓는건데..iterator 라는 자바스크립트 네이티브가 있는건 아니다. 단지 저건 지정이다.
일종의 리터럴 함수가 되겠다.
$R(0, this, true) 에서 this 로 지정된 var timesValue 를 0, 1, 2 배열로 리턴하고 each 메소드를 통해서 지정된 리터럴 함수 iterator 를
$R(0, this, true) 에서 반환된 정수 배열을 1씩 증가하면서 실행한다.

• toPaddedString : 파라멘터가1개고 10진수면 0을 붙여 리턴하고, 2번째 인자로 진수가 넘어오면 자리수만큼 진수로 만들어 반환한다.

 
  (13).toPaddedString(4);// -> '0013'
  (13).toPaddedString(2);// -> '13'
  (13).toPaddedString(1);// -> '13'
  (13).toPaddedString(4, 16)// -> '000d'
  (13).toPaddedString(4, 2);// -> '1101'

부연설명을 하자면 이 메소드는 날짜 형태를 만들때 유용하게 쓰일수 있다.
자바스크립트에는 arguments 객체 라고 하는 함수의 인자 가 있는데 이녀석이 있어서 아주 황당한 코딩이 가능 하다 바로 위 예제 에서 보여지는 거처럼
인자를 1개를 넘기는데, 인자를 1개를 받는 toPaddedString 메소드는 없다는 거다. 잘 이해가 안된다면 다음을 보자. 아마 본인도 모르게 이런 코드를 만이
써본적이 있을것이다.

 
Event.observe(window, 'load', function() {
    Event.observe('okClick', 'click', View.okClick);
});

function testGo() {
  alert('gp');
}

var View = {
    okClick: function(event) {
    
      testGo('',''); // 인자가 2개로 선언된 testGo 함수는 존재 하지 않지만 문제는 실행이 된다는 거다.
    }
}

arguments 객체 의 특징은 아래와 같다.

• arguments[] 배열의 요소는 함수에 전달된 인자의 값을 가지고 있다.
• 인자에 이름이 없더라도 해당 인자의 값에 접근할 수 있게 해준다. ex) arguments[0]

• toJSON : JSON 스타일로 문자열 반환

 
  toJSON: function() {
    return isFinite(this) ? this.toString() : 'null';
  }
 
  (45).toJSON(); //-> '45' ()없이 그냥 45.toJSON을 처리 하면 에러가 생긴다. :D

코드는 전혀 어렵지 않다. 간단하 자바스크립트 네이티브인 isFinite 를 이용하여 this가 유한한 숫자인지 체크 하고 올바르면 toString()을 이용하여 결과를 리턴 한다.

문서에 대하여

• 최초작성자 : 허용운
• 최초작성일 : 2008년 01월 03일
• 이 문서는 Ajax prototype.js 프로토타입 완전분석을 정리한 내용 입니다.
• 이 문서를 다른 블로그나 홈페이지에 퍼가실 경우에는 출처를 꼭 밝혀 주시면 고맙겠습니다.~^\^