JavaScriptの関数を使いこなす

プロトタイプオブジェクトを変数に納める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラスのメソッドを定めるプロトタイプオブジェクトは、予め変数に入れておくと便利です。
講師:
06:28

字幕

このレッスンでは クラスのメソッドを定める prototype オブジェクトを 予め変数に入れておく というやり方について ご紹介します Dreamweaver で開いている HTML ドキュメントには― クラスが定義されています Point というクラスで 座標を扱う x y 座標を扱うという前提です メソッドが prototype のオブジェクトに 定められています クラスのメソッドというのは この prototype オブジェクトに 定める必要があります getDistance これは 距離を求めて返す と 原点 0 0 からの距離です それから add これは x y 座標にそれぞれ― 引数の x y 座標を足しこむ というメソッドです それから scale これは 伸び縮みさせる ということで それぞれの座標に与えられた scale の値を 掛け算して 伸び縮みさせます では ちょっと試してみましょう この script 要素の中に 書いてもいいんですが 一応 テスト用ということで 別建てで script 要素を書きます まずは― インスタンスを作りましょう ポイント 小文字で point としました そして new ですね point ということで 数字はいくつでもいいですが あまり大きいと検算大変なので 2 と 5 位にしておきましょう それから― point コピーしておきましょう 何度も使いますのでね コピーしておいて point.add を使います 3 たまにはマイナスを使いましょう -2 と ペーストします そして scale の― 4倍くらいにしましょうか あまり大きいと やはり検算が大変です ちょっと結果を console.log で 出しておきましょうか console.log で― point をペーストして ここでも コピーを持ってきて また検算をして― 後 getDistance がありますね point.getDistance これは point のオブジェクトの中を 見てもしょうがないので point のオブジェクトの x y 座標は 変えずに― 距離を返しているので point を見てもしょうがないですから― console.log で 戻り値を確認します 戻り値をみれば 距離が分かりますのでね さて これを保存して確認しましょう ブラウザでプレビューします それから JavaScript の コンソールを出しましょう Point Point と 最初の2つのコンソールですね ここでは 最終的な値が出てしまってます 途中経過の値にならないですね コンソールで見てしまうと― 最終的に x y 座標がどうなったか という値になってしまうので 2つ出しても意味はありませんでした 最後の 距離はちゃんと出ていますね では― コンソールはクリアしておきます では 意味のなかった1つ目の console.log こちらは消しておきましょう さて このクラス定義 何の問題もないのですが 実際にこの定義をどんどん作っていくとき― point.prototype point.prototype と 毎回毎回打つのはとても面倒ですね ですから― クラスのコンストラクタを定義した後に― 変数に入れてしまえばいいですね point.prototype を― 変数に入れてしまいます ここ ちょっと消えていますけど 後で入れるので大丈夫です 手間を省こうというわけですから もう p= で結構です そうしたら- 全部 p と 後から戻すのは逆に面倒くさいですけれども 書いてる途中だと思ってください このようにしても ことは分かりにくくならないですね point.prototype が 入っているんだな と ここで確認できますから 後は 逆に point.prototype と 出てくるよりは― メソッド名がすぐに確認できるので 見やすい という面もあります これで特に動作は変わりません 確認してみたいと思います ファイルを保存して- ブラウザで確認します ブラウザをリロードしましょう さっきと結果は変わりませんね 1個 console.log を消しましたので 出力が1個減っていますけれども 同じ結果です クリアしときましょう prototype オブジェクトを 変数にあらかじめ入れておく というのは 手間が省けて楽ですが 1つだけ注意を付け加えます それはですね― console.log で p と p というようなこの変数ですけど これを見た時に― p が残っているということです しかも これグローバル空間 グローバルに対する宣言ですから グローバル変数として ずっとこの prototype が 残ってしまう ということになります ここセミコロンを忘れていました すみません その点にご注意ください ですから 他のクラスでも同じように var p とやっていますと― 全部上書きされてしまいますね もっとも この p は 暫定的に使っている変数ですので 上書きされても ことすら困ることは ないですけれども この p が残るということを 確認しましょう 1回ファイルを保存して ブラウザに行きます ウィンドウをリロードしましょう そうすると Point 括弧括弧 とありますけど これは point の prototype が 残っていますよ ということを示しています このレッスンでは クラスにメソッドを定めるとき― そのコンストラクタの prototype オブジェクトを 予め変数に 短い変数に入れておくと 便利だということについてご紹介しました 但し その変数がグローバル空間に 残ってしまうことには ご注意ください

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

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

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

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

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