JavaScriptのクラスを定義する

サブクラスを定める

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラスを継承したサブクラスの定め方についてご説明します。
講師:
08:11

字幕

このレッスンでは親のクラスを継承した子どものクラス、サブクラスといいますけれどもそのサブクラスの定め方について説明します。今開いている HTML ドキュメントではPoint というクラスが定められています。こちらはコンストラクタですね。そして、引数をプロパティx と y に設定をします。それから、protype にgetter をメソッドが定められています。これはプロパティの様にアクセスができるんですがそして、クラスに対する静的なプロパティそれから静的なメソッドというのが定められています。では、ここにサブクラスを加えることにしましょう。改行してちょっと間を開けましょう。ここからまた別のクラスですよ、という事なんですがPoint クラスを継承します。ですから、これもやはりコンストラクタカーソルが必要です。function vector とします。座標があるとベクトルの計算ができますのでそういった物を加えるという想定になっています。そして、引数は今のところ特になしです。そして、閉じましてvector.prototypeprototype はデフォルトではオブジェクトクラスのオブジェクトが入ります。 これと同じですね。でも継承したい Point クラスがありますのでこの Point クラスのオブジェクトを設定すればいいとそうすれば、継承ができますということでここはまずは古いやり方をご説明しますけれどもnew で Point クラスですね、これを呼び出します。これは継承のためだけですので特に引数は必要ないです。ですから、引数は渡しません。これで、vector のクラスがPoint を継承しました。そして、vector 独自のプロパティやメソッドはないんですが継承したことを確認します。ここでテスト用のコードとしてオブジェクトを作ります。new で vector です。こちらは引数がありませんので引数無しと。そして、でも x y を設定しないとgetter のメソッドが使えませんのでここで直に加えます。ここは1としy はスクエアルート、Math.sqrt ですね。ルート3とします。そうすると底辺が1高さがルート3ですから三角定規の細長い方ですね。ということで、距離、斜辺は2になります。それから、角度、底角は60 度になります。その点を確認しておきましょう。console.log でobject のx と y と継承していますからlength ですね。 この getter メソッド、プロパティの様にアクセスするメソッドが使えます。それか、同じく angle と。これも getter のメソッドですね。プロパティの様にアクセスします。そして、確認用にここでもうひとつ console.log を入れましょう。とりあえずは、this.x this.y とします。これはいくつになるでしょうか。00 ですね。これはこの prototype にvector ですね、vector のプロトタイプにnew point と呼んでprototype を設定するんですがそうするとコンストラクタが呼ばれますから引数無しなのでデフォルトの00 が入ります。その上で、オブジェクトを今度は、vector のコンストラクタへ作り値を設定して、ここでまたconsole.log ですね、ですから、xy が設定されましたから値が変わるはずです。それから、length、angle がちゃんとアクセスできることを確認しましょう。ファイルをいったん保存して、ブラウザでプレビューします。そして、「表示」の「開発/管理」の「JavaScript コンソール」と。見てみると、最初にまずprototypevector の prototype に設定をする時にPoint を引数無しで呼んだそのために 00 デフォルト値が出ています。 それから、実際に vector のコンスタントで使ったオブジェクト、この x が 1y はルート3ですね。それから、先程予言した通り斜辺はちょっと誤差がありますが2です。そして、この angle は単位がラジアンですのでちょっと見て60 度だと分からないかもしれませんが60 度です。では、もう一つ別のやり方をご紹介しましょう。MDNMozilla Developer Network のリファレンスを参照しました。このメソッド、Object.create これはオブジェクトを作るメソッドでコンストラクタを呼びません。そして構文としてはObject.create で括弧の中には作りたいオブジェクトのクラスのprototype を出すということになっています。今回の場合は new. Point ということでオブジェクトを作っても特段不都合はないですけれども場合によってはコンストラクタを呼んだことによって何か処理が行われその処理をさせたくないという場合があります。比較的最近のブラウザであれば先程の Object.create というメソッドが使えます。コンストラクタを呼ばないのでこちらの方がスマートでしょう。 Object.createそして、継承したい作りたいオブジェクトの prototype です。これです、こちらをコピーを持ってきましょう。それか、先ほどの angle ラジアンで気に入らない方がいると思うんで掛けることのラジアンを度数に直す比率ですねこれは、クラスに設定されていますのでこちらは、継承はされないです。prototype で継承していますのでprototype に設定したものはあるいはオブジェクト自身が持っている物については継承するんですけどもクラスに直に設定した静的なプロパティここでは定数ですけれども静的なメソッドは継承されませんからこのまま使います。ではこれで確認をしましょう。ファイルを保存します。ではブラウザをリロードします。先程はPoint のコンストラクタが呼ばれましたので00 と出てきましたけれどもリロードすると消えました。つまり、コンストラクタを呼んでいませんのでprototype にはちゃんと Point クラスのオブジェクトができたんですがコンストラクタを呼ばずにそのオブジェクトが設定されたということが確認できました。値は最後この角度はちゃんと度数になっていますね若干の誤差がありますけど60 度です。 このレッスンでは、クラスを継承したサブクラスの定め方についてご説明をしました。その場合、サブクラスのコンストラクタを定めるそして、そのクラスの prototypeプロパティに最近のブラウザであればObject.create というメソッドを使って継承したいクラスの prototype を引数に渡せばよいという事でした。

JavaScriptのクラスを定義する

実はJavaScriptのクラスはプロトタイプというオブジェクトに基づいており、JavaやC++などのクラスとは多少異なります。またJavaScriptでクラスを定義することで機能を加えたり用途を広げることができます。このコースではJavaScriptのクラスの仕組みやコンストラクタ関数の定義、プロパティやメソッドの加え方などについて説明します。

2時間21分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年07月11日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。