web入門
すばらしきwebの世界

javascript プロトタイプ あれこれやってみる その①

2016.08.25javascript, フロントエンド

javascriptは正直少し苦手です。

根が深いのと表記が見にくい、扱いにくいです。

でも、javascriptを扱う場面は多々ありますので、今回はjavascriptのプロトタイプを扱ってみようと思います。

javascriptはクラスというより関数型?メソッド型?と呼ぶのでしょうか、オブジェクトの扱いが基本的に関数型です。

その中に、メソッドやプロパティを定義します。


基本

まず、関数型を定義します。

その後プロトタイプにアクセスし、メソッドを定義します。


関数型の定義

以下、関数型を定義します。


MyAbility オブジェクトは関数型で、プロパティとして、job、weaponを設定し、初期化しています。


プロトタイプ

プロトタイプとはオブジェクトそのものを指します。

定義した関数型のオブジェクト(MyAbility)のオリジナル、いわゆる本体を指します。

このプロトタイプにアクセスすることで、メソッドを定義できます。

MyAbility.prototype ~ と記載します。

以下に例を記載します。


職業(setJob)、装備(setWeapon)を設定出来るメソッドと設定された状態(viewStatus)を見ることが出来るメソッドを定義しています。

事項からは実際に作成してみます。


画面の作成

実際に使用して見ましょう。

例として、ブラウザにボタンを3つ用意します。

1つめは現在のステータスを確認出来るボタン。

2つめはレベルアップし、レベルアップ後のステータスを確認するボタン。

3つめはスキルのみを確認出来るボタン。

ファイル名を “index.php” とし画面を作成します。


後に作成する test.js を読み込んでいます。

“現在の能力” ボタンをクリックすると、test.js内に記載された status() が実行されます。

“レベルアップ”“スキル表示” についても同様に見てください。


JavaScriptの作成

先に記載した、test.jsを作成します。

番号の順に説明します。



① 関数の型を定義する

“基本” で説明した通りですが、関数型のオブジェクトを定義しています。


②外部からステータスを設定可能にする

“基本” で説明した通りですが、プロトタイプにアクセスしメソッドを定義しています。


③アビリティを生成する

“new ~” でインスタンスを生成しています。


④ カレントステータスを表示する

プロパティの内容を表示します。

レベルアップボタンを押下しない場合、職業は “すっぴん” 、装備は “こん棒”、スキルは “undefined” が表示されます。


⑤ レベルアップする

setJob、setWeapon、viewStatusメソッドを実行しています。

また、skillプロパティを新たに追加しています。

レベルアップボタンを押下後、④の “現在の能力” ボタンを押下すると

職業は “剣士” 、装備は “エクスカリバー”、スキルは “両手持ち” が表示されます。


⑥ スキルを表示する

⑤で設定したskillプロパティにアクセスし内容を表示します。

レベルアップボタンを押下しないとskillプロパティは存在しない為 “undefined” が表示されます。


最後に

スコープが分かりずらい。

定義部分(①~③)と関数部分(④~⑥)に分けて実行は出来ません。いわゆるファイルをまたぐことは出来ないようです。

色々やってみたり、他のサイト見たりして理解を深めようと思います。

以上です。