第４回JavaScriptゼミ セクション２－８ 発表者 直江 宗紀
prototypeオブジェクト prototypeオブジェクトとは 既存のオブジェクトへ・・・ 特殊なオブジェクト ユーザ定義のプロパティの追加 ユーザ定義のメソッドの追加 オブジェクトの継承 特殊なオブジェクト (オブジェクトから見ればプロパティに相当)
プロパティ、メソッドの追加 プロパティ追加の書式 メソッド追加の書式 オブジェクト名.prototype.プロパティ名 = プロパティ値 オブジェクト名はインスタンス名では無い プロパティ名は追加したいプロパティのこと プロパティ値は追加したいプロパティの初期値 メソッド追加の書式 オブジェクト名.prototype.メソッド名 = 追加したいメソッド名 基本的な形はプロパティ追加と同じ 追加したいメソッドはfunctionキーワードで定義可能
プロパティ追加 プログラム例（１） -前略- // Dateオブジェクトにnoteを追加 Date.prototype.note = null ; // インスタンスの作成 var today = new Date() ; today.note = "今日はいい天気" ; var birthday = new Date(1959,6,3) ; birthday.note = "私の誕生日" ; // ２つのインスタンスを表示 document.write(today.note,"<br>") ; document.write(birthday.note,"<br>") ; -後略- 補足：以降、以下のことを省略する -前略-の内容 <html> <head> <meta http-equiv="Content-Script-Type“ content="text/javascript"> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> -後略-の内容 </script> </body> </html>
プログラム例(１)結果
プロパティの追加 プログラム例（２） -前略- function _getDayOfWeek(){ var dayOfWeek=new Array("日","月","火","水","木","金","土") ; return dayOfWeek[this.getDay()] ; } Date.prototype.getDayOfWeek=_getDayOfWeek ; var today=new Date() ; document.write("<center><h2>") ; document.write("今日は平成") ; document.write(today.getFullYear()-1988,"年") ; document.write(today.getMonth()+1,"月") ; document.write(today.getDate(),"日(") ; document.write(today.getDayOfWeek(),"曜日)です") ; document.write("</h2></center>") ; -後略-
プログラム例(２)の結果
オブジェクトの継承 継承 継承元オブジェクトに新たにメソッドを加えた 新しいオブジェクトを作る JavaScriptでは「継承に近い」機能を持つ (継承自体と同一ではない) 実装にはprototypeを利用する
具体的な継承例 Customerオブジェクト GoldCustomerオブジェクト theNameプロパティ theNumプロパティ theDateプロパティ displayInfo()メソッド theNameプロパティ theNumプロパティ theDateプロパティ displayInfo()メソッド 継承 goldPointプロパティ
継承の実装と使用 // ---------Customer->GoldCustomerの実装 function GoldCustomer(name,num,theDate,goldPoint){ this.base=Customer ; this.base(name,num,theDate) ; this.goldPoint=goldPoint ; } GoldCustomer.prototype=new Customer ; // ---------利用例 var customer1=new GoldCustomer(“直江”,100,new Date(),100) ; customer1.displayInfo() ; document.write(customer1.goldPoint()) ;
実装結果例
Functionオブジェクト 無名関数 Functionを用いることにより無名関数を生成できる 書式： 特徴： 変数=new Function(“引数１”,”引数２”,・・・,”return 戻り値”) ; (“Function”と先頭が大文字になっていることに注意) 特徴： 変数にはオブジェクトが格納されている ただし、関数自身は無い
具体例 ・通常の宣言との違い function sum(x,y){ return (x+y) ; } sum=new Function(“x”,”y”,”return x+y”) ; 変数にオブジェクトを格納。 sumはオブジェクトとなる。 “sum”という関数を定義。 sumは関数(メソッド)となる。
Objectオブジェクト Objectオブジェクトの特徴 全てのオブジェクトの基 コンストラクタの定義が不要 メソッド、プロパティを持たない空のオブジェクト メソッド、プロパティの追加が容易
Objectオブジェクトの使用例 インスタンスの生成例(meインスタンス) プロパティの追加 メソッドの追加(helloメソッドの追加) var me = new Object() ; プロパティの追加 me.name=“直江” ; me.year=21 ; メソッドの追加(helloメソッドの追加) function hello(){ document.write(“Hello!”) ; } me.hello=hello ;
Object使用サンプル サンプルプログラム（３） -前略- var me=new Object() ; me.name="直江" ; me.year=21 ; function hello(){ document.write("My Name:"+this.name+"<br>") ; document.write("Year:"+this.year+"<br>") ; } me.sayHello=hello ; me.sayHello() ; -後略-
プログラム例（３）の結果
演習問題 四則演算それぞれがメソッドとなっている与えられた二つの値を計算するオブジェクトがあったとする。そのオブジェクトを継承によりビット演算にも対応させよ。さらに、prototypeによりビットシフト演算機能も追加せよ。コンストラクタへ渡す引数の値(計算させる値)は任意とする。結果表示に関して、引数と結果の表(tableタグ)により表示せよ。形式は問わないものとする。
付録１ HTMLタグ タグの一つ一つはオブジェクト(エレメント)として存在 入れ子形式記述である必要性 基本はタグを入れたら閉じるタグも記述 <h1>・・・(中略)・・・</h1> ←h1タグエレメント 入れ子形式記述である必要性 <div>・・・(中略)・・・<font>・・・</font></div> fontタグは「divタグに属するエレメント」と認識される →<div>・・・(中略)・・・<font>・・・</div></font>は原則不可 基本はタグを入れたら閉じるタグも記述 brタグ,imgタグなどのように閉じる必要が無い物があるが 基本的には<タグ>～</タグ>という書式である
付録２ tableタグ trタグ thタグ tdタグ 表を作成するためのタグ(入れ子形式のタグ) trタグ,tdタグ,thタグを利用し表を形成 trタグ TableRowの略で、行を作成する thタグ TableHeaderの略で、項目題等を提示するのに利用 tdタグ TableDataの略で、セルを作成するのに利用
tableタグのサンプル <html lang=“ja”> <head> <title>Sample:TableElement</title> </head> <body> <table border=1> <tr> <th>Head1</th> <th>Head2</th> </tr> <td>Data1</td> <td>Data2</td> </table> </body> </html>
tableタグの表示結果