このまえ、妻とはなまるうどんに言ってたときにJavaScriptのオブジェクトについて話していた。prototypeプロパティとかいう話になっていたのだけど、その時、よくわかんなかったから、調べてみた。
JavaScriptを使ってそんなに高度なプログラミングを考えたことなんてなかったのですが、最近Ajaxなんかが流行りだしてきてもんで、30過ぎの私にはついていくのが必死です。
1.JavaScriptでクラス作成
クラスを作るのはいいが、慣れ親しんだものでないと理解しにくいので、サッカー選手クラスを作ってみました。
サッカー選手のプロパティは「年齢」と「ポジション」としておきましょう。
さて、サッカー選手クラスはこんな感じで書きます。
function Player( _age, _position )なんとも理解し難い書き方、なんでクラス宣言なのに「function」やねん！と思っちゃいます。
{
this.age = _age;
this.position = _position;
}
でも、よく見たら、これはコンストラクタなんだよね。ということで少し納得するものの、じゃ、クラス宣言部分はって思っちゃいます。
納得のいかないまま、このクラスの呼び出し方は、
var Suzuki = new Player("26", "MF");になるみたいです。これは引数付コンストラクタと考えれば納得。
これをつかうサンプルは以下のとおり
実行結果
25 MF
26 DF
true
age
position
確かにSuzuki選手とTeshima選手ができていますし、プロパティにageとpositionがあることが確認できます。
2.prototypeプロパティ
JavaScriptでは、prototypeプロパティを使って動的にプロパティやメソッドを追加できると書いてあったので、試してみました。
先ほどのPlayerオブジェクトに対して「ゴール数」プロパティを追加してみます。
function Player( _age, _position )
{
this.age = _age;
this.position = _position;
}
Player.prototype.goalOK = 5;
Player.goalNG = 30;
これを実行するとgoalNGプロパティはundefinedとなります。
3.メソッドの追加
prototypeプロパティを使えば、メソッドを追加することはできそうだとわかってきました。
それじゃ、Suzuki選手とTeshima選手に相手の攻撃から守ってもらいましょう。
function Player( _age, _position )
{
this.age = _age;
this.position = _position;
}function Player_Defence()
{
if (this.position == "DF") {
return true;
} else {
return false;
}
}
Player.prototype.defence = Player_Defence;var Suzuki = new Player(25, "MF");
var Teshima = new Player(26, "DF");document.write("鈴木選手の守備 : " + Suzuki.defence() + "
");
document.write("手島選手の守備 : " + Teshima.defence() + "
");
実行結果
鈴木選手の守備 : false
手島選手の守備 : true
みごと、手島選手は相手の攻撃から守ってくれました。
じゃ、もし、相手がアラウージョだったらどうなるでしょうか？
function Player( _age, _position )
{
this.age = _age;
this.position = _position;
}function Player_Defence( _playername )
{
if (this.position == "DF") {
if ( _playername == "アラウージョ" ) {
return false;
}
return true;
} else {
return false;
}
}
Player.prototype.defence = Player_Defence;var Suzuki = new Player(25, "MF");
var Teshima = new Player(26, "DF");document.write("鈴木選手の守備 : " + Suzuki.defence("アラウージョ") + "
");
document.write("手島選手の守備 : " + Teshima.defence("アラウージョ") + "
");
あらま、アラウージョはだれも止められませんでした。
さて、話をもどして、JavaScriptにはオブジェクトにメソッドやプロパティを追加できるみたい。もうわけわからんようになってきたので、次回に。（次回があれば...）