JavaScriptのクラスを定義する

ベクトルの距離を求めるメソッドの定義

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ベクトルの距離を求めるメソッドとオブジェクトを複製するメソッドを定めます。
講師:
06:44

字幕

このレッスンでは、ベクトルを定めたサブクラスに二つのベクトルにオブジェクトの距離を求めるメソッドを新たに定めてみたいと思います。まず、座標を定めたPoint のクラスがあってxy 座標を持っているんですけれどもそれを継承して Vector というクラスを定めました。これが、ベクトルを扱うクラスサブクラスという事になります。今二つ add と scale というメソッドがあるんですがこれに新たに getDistance というメソッドを付け加えます。これは引数に別の Vector のオブジェクトを受け取って自分とそのオブジェクトとのベクトルの距離を求めるという計算をしてみたいと思います。ですから、Vector の prototype にgetDistance引数には別のベクトルのオブジェクト先頭にアンダースコアを付けましたけれども_vector ということで、( );さてどんなふうに計算したらいいかというと計算自体は簡単です。その元のオブジェクトと引数に渡されたオブジェクトこれのベクトルとしての差を求めます。そしてその差の長さ、差として求めたベクトルの長さが2つのベクトルの距離という事になります。 差を取るには、add のメソッドにxy を逆転してマイナスを付けて足しこめば引き算になりますね。ただそうしてしまうと、その元のベクトルのxy 座標は変わってしまいます。距離と同じベクトルになってしまうんですね。二つのベクトルの距離を求めたいという場合には二つのベクトルの xy 座標をそのままにしておきたいということが多いでしょう。ということなので、このベクトルと同じ xy 座標を持った複製をするメソッドを先に定めたいと思います。ここに Vector のprototype の clone にしましょう。こっちはちょっと違いますね。function が抜けていました。= function同様にこちらも function で複製を作るんですから特に引数はいりません。{ }; ということでですからまた新たに Vector のオブジェクトを作るわけですね。そこには、new でconstructor が呼びます。Vector として渡すのは自分自身の xy 座標です。これでコピーができるわけですね。this x this y としてあげてこの複製したオブジェクトを返せばいいと。return_vector これでいいですね。 そうしたらこれをgetDistance の中で呼びます。clone にしましょうか。そして、this に対して clone と。そうすると、clone が出来上がりますので今度は引き算のメソッドが使えますね。clone に対して、使ってしまえば元のベクトルのオブジェクトは変わりませんので add としてあげて引数で受け取ったベクトルのオブジェクトマイナスを付けて xy 座標を渡せればいいということになります。そして求めたいのは長さですからこの clone に対してlength とこれを return すればいい。length というのは継承している親ですね。スーパークラスのget メソッドになります。ですからプロパティの様にアクセスできるということなんですけれどもそれを返すとこれでいいでしょう。ではテスト用のコードを書きます。オブジェクトは二つ必要ですね。まずは、obj として new のvector でx 座標 1 、y 座標は渡しません。そうすると、親クラスのここでデフォルト値、y が無ければデフォルト値 0 が設定されます。ですから、1 、0 という座標のVector オブジェクトが出来上がります。 次に obj の2 としましょう。同じく new vector の今度は x は 0 です。y を 1 とします。このふたつの差を console.log で出しましょうか。そうしたら、どちらを先に書いても構いませんけどobj getDistance でobj 2 を渡すということですね。ではこれで保存して確認しましょう。ファイルを保存してブラウザでプレビューします。ブラウザの「表示」>「開発/管理」「JavaScript コンソール」ということで 1.414何か長い数字が出てきましたけどこれはルート2ですね。x 座標が 1 で、y 座標が 0x 座標が 0 で、y 座標が 1という事ですから直角二等辺三角形三角定規の二つの辺が等しい三角定規がありますね角度が 45 度のやつです。そこはルート2になりますので、ルート2の数字が出ています。このレッスンでは、2つのベクトルのオブジェクトVector オブジェクトの距離を求めるメソッドを定めました。そのために必要なったのでもう1つそのオブジェクト自身の複製を作るというclone メソッドも合わせて定義をしました。

JavaScriptのクラスを定義する

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

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

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

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

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