JavaScriptのクラスを定義する

クラス定義の中で使う変数についての注意

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラス定義でメソッドの外に宣言した変数の扱いには注意が必要です。
講師:
09:51

字幕

このレッスンではクラス定義でメソッドの外に宣言した変数の扱いには注意が必要だということについて説明します。まず HTML ドキュメントに JavaScript ファイルを2つ読み込んでいます。既に2つ開いていますけれどもこのクラス定義の書き方というかどういう風に構成するかそういった点をある程度統一しておいた方がわかりやすいでしょう。その中でたまに見かけるのがここですと、メソッドをPoint.prototype に設定するわけなんですけどもいちいち Point.prototype と書くのは面倒だそれに長くて見にくいという場合があります。そういう時はこれを変数に入れてしまえばもうちょっと簡単に書けますね。そのように書くか書かないか或いは特に書いてしまってから特に変える必要が無い場合が多いでしょうけれどもここではそのスタイルで書いてみたいと思います。では、この Point.prototype なんですけどもこれを変数に入れることにしましょう。ここでもう使っていますよね。ということなので、この前に変数を宣言します。ここで注目して頂きたいのはこの変数はメソッド、関数の外にあるということです。そして proto という名前にします。 設定するのは Point.prototypeでは、後の所は全部書き換えるんですけどもここは Dreamweaver の機能「検索 / 置換」を使うことにしましょう。Point.prototype を proto に書き換えると。慎重に確認しましょう。ここは書き換え、いいですね。もう proto に入っていますから置き換えます。コメントアウトしてありますのでどうでもいいんですけどここは統一しておきましょう。置き換えます。そしてメソッドの設定の所は置き換えできます。ここは置き換えてはいけませんね。proto に代入しているわけですからここはスキップ「次を検索」これですべて済みました。閉じて、ファイルを保存します。そして Vector の方も同様ですね。Vector の方は短いんですけれども書く場所なんですがここで Point の prototype をオブジェクトを作って継承しています。ですから、この後に変数に代入しないといけません。var の proto と。そして Vector.prototype をコピーします。ここも又「検索 / 置換」で行きましょう。Vector.prototype を proto に変えます。 そして「次を検索」してここはプロパティを設定していますのでOK ですね。置き換えます。メソッドの設定は置き換えます。置き換えます。ここは置き換えてはいけませんね。継承しています。「次を検索」ここも代入しているので置き換えてはいけません。オシマイですね。閉じましょう。ではこちらも保存する前に確認用のコードを2つ入れたいと思います。先頭で console.log でproto と打ってしまいます。あれ? proto ってここで宣言してるんじゃないの、と。実はここで値が表示されます。この同じコードをコピーしてここに持ってきます。これでどうなるかということですね。ではここで保存しましょう。HTML ドキュメントの方にはテスト用のコードが入っています。動作には特に変わりはないんですがPoint と Vector のクラスのJavaScript ファイルの読み込みは先に行っていますので先程のコンソール2つは最初に表示されます。その後でこのテストコードのコンソール2つが表示されることになります。ここでは Point を継承している Vector にx y 座標 1 とルート3を渡しています。そしてそのオブジェクトに、やはりPoint に定義されているんですがゲッターのメソッドで原点からの距離length プロパティとそれから X 軸と成す角度 angle ラジアン値ですのでそれを度数に直す比率を掛け算しています。 ですから、距離と角度が度数で出てきましてそして最後確認の為にもう一度オブジェクトだけconsole.log で表示してみましょうということです。ではこちらは保存する必要はありませんので「ブラウザーでプレビュー」してみましょう。「表示」>「開発 / 管理」>「JavaScript コンソール」です。さて、最初の2行が console.log でproto を表示している部分です、Vector のクラスの中に書きました。最初 var 宣言する前の proto なんですがオブジェクトになっています。というのは Point のクラスが先に読み込まれてproto という変数に Point クラスのコンストラクタの prototype を入れています。その時 Point クラスは特に継承していませんのでデフォルトではオブジェクトを継承することになります。ですから、その prototype が出てきました。その後、今度は Vector クラスが継承するPoint クラスの prototype を入れましたのでその Point クラスの prototype が表示されたということです。あと数字の方は特に問題ないですね。 距離が2、角度が 60 度そして Vector のオブジェクトだよ、ということで表示されています。ここでコンソールからちょっとJavaScript コードを入力してみましょう。どうするかと言うとobj というテスト用のオブジェクトですね。Vector のオブジェクトとここに出ていますけれどもそれに対して scale というメソッドが、これは Vector のクラスに定められているんですけどもそれがありますので scale(2)これで x y 座標2倍します。undefined というのは scale が特に値を返さないからです。では obj の x 座標がどうだったかと言うと2となっていますね。obj の y 座標は、と言うとルート3が2倍されています。序に、length と angle を見ておきましょうか。obj の length2倍になっていますね。2が4になっています。そして obj の angleこれは x y 同じように拡大しましたので角度は変わりません。アッ、角度はラジアン値ですから掛けることの Point の RAD_TO_DEGこれを入れないと度数になりませんね。度数 60 度ということで確認ができました。 さてここでテスト用のコードで悪意のある改変を行います。どうするかと言うとproto に対してscale という関数をメソッドを定義してしまいます。function ですね。そして引数を受け取ったらその引数をアラートで、alert メソッドで表示するという風にして保存します。ブラウザーをリロードしましょう。まずこの段階では先程と変わりません。ここで又コンソールから入力します。Object の scale の、また2倍です。先程これで2倍になりましたよね。ところがこれで入力をすると先程書き換えたメソッドが適用されてしまってアラートのダイアログが出てしまったということです。かなり悪意のある改変ですけどもこういうことが絶対に無いとは言えないですよね。そこでどうしたらいいかと言うとこのクラス定義の最後でproto に null を、これは空っぽという意味ですけども代入しちゃいます。保存しましょう。そして Vector の方も同様にコンソールで確かめる前にやっちゃいましょう。proto に null と。保存してブラウザーをリロードします。エラーが出てきます。何故かと言うと先程 proto に scale というメソッドをむりやり設定しましたよね。 ところがもう null になってしまっているので設定ができませんということです。ですからこれは正しいエラーでproto にアクセスしても悪いことは行えないということになります。このレッスンではクラス定義でメソッドの外に宣言した変数の注意について説明しました。外に宣言すると、そのままではそのあとアクセスできてしまいますので要らなくなったら必ず null を設定するということを忘れないでください。

JavaScriptのクラスを定義する

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

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

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

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

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