JavaScriptのクラスを定義する

オブジェクトを複製するメソッドの継承

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スーパークラスに定めたオブジェクト複製のメソッドを、サブクラスで継承する。
講師:
04:53

字幕

このレッスンではオブジェクトを複製するメソッドそれをスーパークラスに定めてサブクラスで継承してみることにします。今スーパークラスとして Point というクラスが定められています。x y 座標を持った座標を扱うクラスです。そしてそれを継承しているVector というクラスがあってこれは名前の通りベクトル演算をします。その為に Point を継承している訳ですね。そしてこのメソッドの1つに2つのベクトルの距離を求めるというメソッドが定義されています。その時に元のベクトルの座標を変えないためそれを複製するというメソッドが定められています。この clone というメソッドなんですがそれがここです。でもこういう基本的な機能というのは親のクラスに定めて子供の方で継承できると便利な場合が少なくありません。ですから、これをカットしてPoint のクラス、親クラスの方に移しましょう。カットをしてスクロールをしてこの後ですかね。ここにペーストします。Vector ではないですね。ですから Point をコピーしてVector にペーストと。そうするとこの変数どうでもいいんですけどVector というのは何かちょっと紛らわしいですね。 clone にしましょうか。そうしたら、これを又コピーしてreturn の後にペーストです。さて、Vector のコンストラクタを呼んだのではまずいです。じゃ Point かと言うと継承して Vector からclone のメソッドを呼んだ時にPoint のオブジェクトでは Vector のメソッドは使えないですね。ということなので、Point から呼んだ時にはここが Point になって欲しいVector から呼んだ時にはVector になってほしいそんな方法があるんだろうか、と言うと実はあります。constructor というプロパティがprototype のプロパティの中にあるんですけどもそれはこのクラスを定めているコンストラクタを参照します。実はこのクラスから作ったオブジェクトもこの constructor というプロパティを持っていて同じものを参照するんですね。ということなので、ここで自分自身を参照した上でconstructor にアクセスすると自分の constructor を呼び出すことができます。そして x y 座標を渡すということなのでVector で呼んだ時はここがVector に変わってくれるわけなんですね。 本当に変わってくれるか確認する為にここに console.log でこの作られたオブジェクトがちゃんとVector から呼んだら Vector になっているかコピーを入れて確認しましょう。そしてテスト用のコードは既に書いてありましてVector のオブジェクトを2つ作ります。そして getDistance を呼び出しています。座標はこちらは x 座標1y 座標を省略すると 0 になります。ですから (1, 0) ですね。そしてこちらは今度はx が 0 で、y が 1(0, 1) です。その2つの距離は、と言うと直角二等辺三角形ですから1対1対 斜辺はルート2ですね。ということなので、ここでgetDistance を呼び出すとルート2になります。さて、この getDistance の中でclone を呼び出していますからそうすると先程のうつした clone メソッドが呼び出されてclone を作ってここでどういうオブジェクトが作られたかconsole.log で表示されますので確認することにしましょう。ファイルを保存して「ブラウザーでプレビュー」します。そして「表示」>「開発 / 管理」>「JavaScript コンソール」です。 すると、ちゃんと Vector になってますね。そして距離は今言った通りルート2「一夜一夜に人見ごろ」というやつですね。このレッスンでは親クラス、スーパークラスにそのオブジェクトを複製するメソッドclone を定めてそれをサブクラスから継承できるようにしました。その為にそのオブジェクト自身のコンストラクタ関数を参照するconstructor プロパティを呼び出してそこに引数を渡すという方法をとったということです。

JavaScriptのクラスを定義する

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

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

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

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

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