[ 자바스크립트 ] Date()함수에 프로토타입 추가하기

네이버 지식백과에서 'prototype'을 찾아봤더니, 아래와 같은 내용이 검색되더라.

• 선언될 함수의 이름과 반환값. 인자들을 미리 정의해주는 것.
• 소프트웨어나 하드웨어 등을 생산하기에 앞서,
  그 타당성을 검증하거나 성능 평가를 하기 위해서,
  미리 만들어보는 시험적인 모형.
• 게임의 본격적인 개발에 앞서 재미요소나 구현 가능성 등을 검증하기 위해 제작하는 시제품.

더 자세한 내용은 각자 검색하시기를... ─.─;;

---

자바스크립트에는
그날, 그날의 날짜값을 알려주는,
"Date()" 이라는 함수가 이미 만들어져서, 제공되고 있다.
그리고 이 "Date()" 함수에는,
getDay(), getMonth() 등등의, 프로토타입이 설정되어 있다.

"Date()" 함수를, 처음(?) 만든 사람이 프로토타입을 설정했듯이,
우리도 우리 나름대로 프로토타입을 만들어서 추가할 수 있다.
아래처럼 말이다.

<button onclick="example()"> 클릭해보세요 </button>
<p id="demo">  </p>

<script type="text/javascript">
Date.prototype.getMonthString = function () { 
	 var number = this.getMonth(); 
	 var koreanArray = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]; 
	 return koreanArray [ number ];
} 

function example () { 
	 var d = new Date(); 
	 var demo = document.getElementById( "demo" ); 
	 demo.innerHTML = d.getMonthString(); 
} 
</script>

---

똑같은 내용을 가지고, 함수를 따로 작성한다면,
아래와 같이 될 것이다.

function getMonthString ( d ) { 
	 var number = d.getMonth(); 
	 var koreanArray = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]; 
	 return koreanArray [ number ];
} 

function example () { 
	 var d = new Date();
	 var demo = document.getElementById( "demo" ); 
	 demo.innerHTML = getMonthString( d );
}  

---

위의 프로토타입에서 사용된 함수를, 약간 수정을 해서,
아래처럼 사용할 수도 있다.

아래에서, 'this'가 가리키는 것은,
'getMonthString()'이 아니라, 'Date()'이다.

<button onclick="example()"> 클릭해보세요 </button>
<p id="kor">  </p>
<p id="eng">  </p>

<script type="text/javascript">
Date.prototype.getMonthString = function () { 
	 var number = this.getMonth(); 
	 var koreanArray = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ]; 
	 var englishArray = [ "January", "February", "March", "April", "May", "June", 
				     "July", "August", "September", "October", "November", "December" ]; 
	 this.korean = koreanArray [ number ]; 
	 this.english = englishArray [ number ]; 
} 

function example () { 
	 var d = new Date(); 

	 d.getMonthString(); 

	 document.getElementById( "kor" ).innerHTML = d.korean; 
	 document.getElementById( "eng" ).innerHTML = d.english; 
} 
</script>

---

아래는,
"A"와 "S"라는, 두 가지의 프로토타입을 갖고 있을 때,
"A"를 "S"에서 사용하는 방법이다.

또한,
"Kor"와 "ko[ d.getMonth() ]"에는, 똑같이, 현재 월(month)에 해당되는 값이 저장된다.

Kor == ko[ d.getMonth() ],
Eng == en[ d.getMonth() ],
Abbr == ab[ d.getMonth() ]

Date.prototype.korMonthArray = [ "1월", "2월", "3월", "4월", "5월", "6월", 
                                                    "7월", "8월", "9월", "10월", "11월", "12월" ]; 
Date.prototype.engMonthArray = [ "January", "February", "March", "April", "May", "June", 
                                                    "July", "August", "September", "October", "November", "December" ]; 
Date.prototype.abbrMonthArray = [ "Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", 
                                                    "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec." ]; 

Date.prototype.korMonthString = function () { 	 return  this.korMonthArray [ this.getMonth() ]; 	 } 
Date.prototype.engMonthString = function () { 	 return  this.engMonthArray [ this.getMonth() ]; 	 } 
Date.prototype.abbrMonthString = function () { 	 return  this.abbrMonthArray [ this.getMonth() ]; 	 } 

var d = new Date();

var Kor    = d.korMonthString(); 
var Eng   = d.engMonthString(); 
var Abbr  = d.abbrMonthString(); 

var ko = d.korMonthArray; 
var en = d.engMonthArray; 
var ab = d.abbrMonthArray; 

document.getElementById( "demo1" ).innerHTML  =  Kor; 
document.getElementById( "demo2" ).innerHTML  =  Eng; 
document.getElementById( "demo3" ).innerHTML  =  Abbr; 

document.getElementById( "demo4" ).innerHTML  =  ko [ d.getMonth() ]; 
document.getElementById( "demo5" ).innerHTML  =  en [ d.getMonth() ]; 
document.getElementById( "demo6" ).innerHTML  =  ab [ d.getMonth() ]; 

실행된 모습

<p id="demo1"> </p>

<p id="demo2"> </p>

<p id="demo3"> </p>

<p id="demo4"> </p>

<p id="demo5"> </p>

<p id="demo6"> </p>

이 블로그에서 함께 볼만한 글

☞ 내가 만든 함수에 프로토타입 (prototype) 추가하기

이 내용이 도움이 되셨나요? *^^*