第4回JavaScriptゼミ

第４回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 = "私の誕生日" ;
補足：以降、以下のことを省略する
-前略-の内容
<html>
<head>
<meta http-equiv="Content-Script-Type“
content="text/javascript">
</head>
<body bgcolor="#ffffff">
<script language="JavaScript"
type="text/javascript">
// ２つのインスタンスを表示
document.write(today.note,"<br>") ;
document.write(birthday.note,"<br>") ;
-後略-
-後略-の内容
</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を利用する
具体的な継承例
GoldCustomerオブジェクト
Customerオブジェクト
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”と先頭が大文字になっていることに注意)

特徴：


変数にはオブジェクトが格納されている
ただし、関数自身は無い
具体例
・通常の宣言との違い
sum=new Function(“x”,”y”,”return x+y”) ;
変数にオブジェクトを格納。
sumはオブジェクトとなる。
function sum(x,y){
return (x+y) ;
}
“sum”という関数を定義。
sumは関数(メソッド)となる。
Objectオブジェクト

Objectオブジェクトの特徴




全てのオブジェクトの基
コンストラクタの定義が不要
メソッド、プロパティを持たない空のオブジェクト
メソッド、プロパティの追加が容易
Objectオブジェクトの使用例

インスタンスの生成例(meインスタンス)
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タグ


TableRowの略で、行を作成する
thタグ


表を作成するためのタグ(入れ子形式のタグ)
trタグ,tdタグ,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>
<tr>
<td>Data1</td> <td>Data2</td>
</tr>
</table>
</body>
</html>
tableタグの表示結果

Download Report