フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

JavaScript入門 継承編

f:id:ksakae1216:20160701152107j:plain

みなさん、コウタロウです!!

 

前回の続きです。

www.ksakae1216.com

 

今回は今までのJavaScriptガイドではなく、下記のサイトから

引用して継承について説明します。

九章第三回 継承 — JavaScript初級者から中級者になろう — uhyohyo.net

 

非常にわかりやすいサイトです。

ブックマークすることをオススメします!!

 

【目次】

 

 

継承とは

あるオブジェクトに対してさらに拡張したオブジェクトを

作ることです。

 

例えば、ゲームの雑魚キャラとボスキャラを創造して下さい。

この2つは、どちらもですね。

 

そのというオブジェクトを継承して

雑魚キャラ

ボスキャラ

という拡張したオブジェクトを作成します。

 

コードを見たほうが早いかな?

 

継承のやり方

gist9f8e5ccb43b3d25093d6c1cbfc5c72e5

 

紹介したサイトからの引用です。

 

10行目の"Dragon.prototype"ですが、"prototype"はコンストラクタの

プロパティで"prototype"もオブジェクトになります。

 

10行目ではこの”Dragon"オブジェクトの"prototype"に”Teki"オブジェクトを

代入し、13行目では"Dragon.prototype"に"attack"メソッドを定義します。

 

これで、17行目で”Dragon"インスタンスを作成し”Teki"オブジェクトを

継承することができます。

※8行目で”Teki"オブジェクトのインスタンスを呼び出しています。

 つまり、2〜4行目が実行されます。 

※出力結果は21行目です。

 

以上で、継承のやり方が分かったかと思います。

 

次は、雑魚キャラ、ボスキャラについてオブジェクトを作る

サンプルを紹介します。

 

継承のサンプルソース

gist5a6e6590ddc87757bc244bf029794193

 

こちらも紹介したサイトからの引用です。 

このサンプルはまさに継承のメリットがよく出ています。

 

”Teki"オブジェクトの10〜12行目と

"Dragon"オブジェクト の20〜22行目に

それぞれ"attack"メソッドがあります。

 

オブジェクトの型次第でどちらの"attack"メソッドが呼ばれるか

わかります。

 

24行目は"Teki"オブジェクトでインスタンスを作成しているので

”Teki"オブジェクトの”attack”メソッドが

25行目は"Dragon"オブジェクトでインスタンスを作成しているので

”Dragon"オブジェクトの”attack”メソッドが呼ばれます。

 

※出力結果は34〜37行目です。

 

 

どうでしたか?

継承ってネットで調べても難しいページばかりでわかりづらかったですが

紹介したサイトと私の記事を見て頂ければ継承を知らなかった方も理解で

きたんじゃないかと思います。