(public).sospep.subjects ~ view article ~ 004-object-prototype-ADDING-methods-and-properties-to-existing-objects

<h1 style="text-align: center;">object.prototype</h1>
<h2>[what]</h2>
<ol>
<li>Date is a native js object for working with Date values, see REF 1 and 2 for some basic examples of usage</li>
<li>this article&nbsp;demonstrates how to add some additional "properties"(= ] monthName, ] ISO_8601) to the native js Date object.</li>
<li>it also demonstrates how to add some additional methods&nbsp;(&nbsp;getMonthName() ), to&nbsp;that same&nbsp;object</li>
<li>this article demonstrates these concepts using a native(exsiting) js object "Date",</li>
<ol>
<li>they also apply to and work exactly the same way with any objects that you define/create.</li>
</ol></ol>
<h2>[why]</h2>
<ol>
<li>all new instances of DATE that you create will now have these ADDITIONAL&nbsp;properties and methods</li>
<li>OOP = extensibility - using an existing object, we have added additional functionality to it</li>
</ol>
<h2>[where] (demo)</h2>
<ol>
<li>] money.js - implements the following example of adding additional properties to the native&nbsp;js Date object and demonstrates their usage.</li>
<ol>
<li>] monthName,</li>
<li>] ISODate,&nbsp;...)&nbsp;</li>
</ol></ol>
<h2>[when]</h2>
<ol>
<li>] you need functionality that doesnt exist -</li>
</ol>
<h2>[example(s)]</h2>
<ol>
<li>] adding a new property (monthName) and (getter) method (getMonthName() ) to the existing native Date object ( using the Date.prototype&nbsp;?property? )</li>
<li>] adding a new property (ISO_8601) and (getter) method (getISO_8601) to the existing native Date object, this property display's the instance of Date object value as an ISO 8601 formatted string YYYY-MM-DD</li>
<li>] adding a new property - literally</li>
</ol>
<h2>[how-to example-1]</h2>
<ol>
<li><strong>// using the "prototype" ___ (property of the Date object)&nbsp;, i am adding a new function/method named "getMonthName()" to the native/primitive js object&nbsp;Date, this method will determine the monthName of the current Date and add/set a monthName property to the Date object</strong></li>
<ol>
<li>Date.prototype.getMonthName=function()<br />{<br />if (this.getMonth()==0){this.monthName="January"};<br />if (this.getMonth()==1){this.monthName="February"};</li>
<li>// ... REPLACED the above code with an array of "monthNames" and single statement this.monthName = monthNames(this.getMonth())</li>
<li>}</li>
</ol>
<li><strong>CALL&nbsp;your new&nbsp;method on the instance of Date that you are working with, to set the value of your new property.</strong></li>
<ol>
<li>var myDate = new Date();</li>
<li>myDate.getMonthName();</li>
</ol>
<li><strong>ACCESS the value of the new&nbsp;property that you have added anywhere in your js code</strong></li>
<ol>
<li>myDate.monthName</li>
</ol></ol>
<h2>[how-to - example-2]</h2>
<ol>
<li>// using the "prototype" ___ (property of the Date object)&nbsp;, i am adding a new function/method named "getISO()" to the native/primitive js object&nbsp;Date, this method will determine the monthNumber of the current Date and set an ISODate format property ( YES&nbsp; i know there is a native js method for this, BUT it&nbsp;doesnt appear to work in all browsers(IE8))</li>
<ol>
<li>Date.prototype.getISO=function()</li>
<li>//&nbsp;created an array of "monthNumbers"</li>
<li>// used getFullYear().toString and this.getDate() to set Year and Day values&nbsp;</li>
<li>SET this.ISO_8601 property = year+monthNumbers(this.getMonth())+day</li>
<li>}</li>
</ol>
<li>CALL&nbsp;your new&nbsp;method on the instance of Date that you are working with, to set the value of your new property.</li>
<ol>
<li>var&nbsp;date = new Date();</li>
<li>date.getISO();</li>
</ol>
<li>ACCESS the value of the new&nbsp;property that you have added anywhere in your js code</li>
<ol>
<li>date.ISO_8601</li>
</ol></ol>
<h2>[how-to example-3]</h2>
<ol>
<li><strong>] // ADDING additional properties to your instance of a Date object</strong></li>
<ol>
<li>] var date = new Date();</li>
<li>] date.newProperty = "new property ONLY on this instance of Date" ;</li>
<li>] now in your code,&nbsp;date.newProperty displays&nbsp; "new property ONLY on this instance of Date" for ONLY this instance of the date object</li>
</ol>
<li><strong>] // ADDING additional property to all instances of Date</strong></li>
<ol>
<li>] Date.propotype.newProperty="new property on ALL Date objects";</li>
<li>] now in your code date.newProperty displays "new property on ALL Date objects" for ANY/ALL instance of the Date object that are instantiated</li>
</ol></ol>
<h2>[reference]</h2>
<ol>
<li>] <a href="http://www.w3schools.com/jsref/jsref_obj_date.asp">http://www.w3schools.com/jsref/jsref_obj_date.asp</a>&nbsp;-</li>
<li>] <a href="http://www.javascriptkit.com/jsref/date.shtml">http://www.javascriptkit.com/jsref/date.shtml</a>&nbsp;-</li>
<li>] scripts/money.js - full source code</li>
<li>] CC to -&nbsp;(id=#) js-objects-native-Date</li>
<li>] <a href="http://www.phpied.com/3-ways-to-define-a-javascript-class/">http://www.phpied.com/3-ways-to-define-a-javascript-class/</a>&nbsp;- stefanov stoyan</li>
</ol><hr />
<h3>&nbsp;</h3>
<hr />
<p>&nbsp;</p>

~ view article ~ Chapter] ch-003-feature-OOP-in-js FROM [ Book] language-javascript IN [ libraries] technology-developer-www