JavaScriptの関数を使いこなす

メソッドからインスタンスを返す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラスのメソッドからインスタンスを返すと、その後ドット(.)に続けてメソッドが呼び出せます。
講師:
05:26

字幕

このレッスンでは クラスに定めたメソッドから インスタンスを返す— というテクニックをご紹介します 今 HTML ドキュメント開いていますが― JavaScript のファイル script.js を読み込んでいます この中に クラスが定義されていて この右側のタブにありますが こちらは後で見ることにします その中には point というクラスが 定められています x y 座標を扱う そういうクラスなんですが— ここインスタンスを作っています x y 座標は本当は 2つ必要なはずなんですが ちゃんとデフォルト値が与えられていて 何もないと 0 が その x y 座標に与えられます そして add というメソッドは— x y 座標プロパティに— この2つの値を それぞれ足しこむ ということになっています scale は x y 座標を この数で掛け算する 結果として console.log で まず インスタンス— 作られたインスタンスのプロパティが どう変わったか確認し 次に getDistance というメソッドがあって 原点からの距離を計算して返してくれます これも console.log で 確認してみます では 結果を確認します 「ファイル」から 「ブラウザでプレビュー」します そして JavaScript コンソールを 表示しましょう console.log の結果が出ました まずはインスタンスの表示ですね クリックすると プロパティの値が x y がこのように変わった— という事が分かります それから— 原点からの距離 ちょっと検算が難しいですけれども— この距離になるそうです 合ってます では確認ができたので 一旦 コンソールはクリアして— 今度は JavaScript の ファイルのほうを見てみましょう クラスはこのように定義されています point のクラスは引数として x y 座標を受け取り— この辺りは デフォルト値を入れる判定ですね そして Distance というメソッドは 自分の— x と y の座標から 原点からの距離を求めて— そして返しています add は引数の値を それぞれのプロパティに足し— scale は引数の値を掛け算しています Distance のほうは計算した結果を 返しますので— return がありますけれども add と scale は 自分の x y プロパティを— 操作しているだけですから 特に返す必要がありません 何も返していないですが ここで あえて返します return 何を返すかというと 自分自身です this インスタンスを返します 返したからといって 直接の結果は変わらないのですが— こちらも同様に― return this としてみましょう 保存をしておきます HTML ドキュメントのほうに移ります これらの処理の結果は 変わりません でも ちょっと書き方を変えてみます point のインスタンスに対して add して— point のインスタンスに対して scale をして と getDistance をして と ちょっとタイプが大変ですよね この時に this を返していると いいことがあります 何か というと この add メソッドを 呼び出した結果— インスタンスが返ります ということは 返されたインスタンスに対して— また メソッドの呼び出しはできるんですね ドットでつなげてしまいます この— getDistance のほうも同様で— この後に— ドットで繋げてしまって構わないですね もっとも getDistance は 返すのは数値ですから― この後にドットを加えても― その point のメソッドを 呼び出すことはできないので ここで打ち止めなんですが でも これで知りたい結果 距離は出せるんですね その結果を Distance という 変数に入れると— ここに 最終的に— getDistance を呼び出した 結果の距離が出てきます ではこれをコピーして— console.log の引数の中に ペーストすればいいでしょう という事ですね では保存をして— 確認しましょう ブラウザのほうに行きます ブラウザウィンドウをリロードします そうすると 今度は— point インスタンスを console.log で出す という— あの記述がなくなりましたので point は出てこないですが 最終的な計算結果— 先程と一緒ですね ちゃんと getDistance の値が 返った ということです このレッスンでは クラスのメソッドで― 自分自身 インスタンスを返す というテクニックをご紹介しました そうしてあげると― メソッドが 連続して呼び出すような内容の場合— 計算の場合とか 或いは線描 線を描くとか 絵を描くとか というときに— どんどん書き足していく ということはありますね そういった場合に インスタンスを返しておくと— メソッドを呼び出した後に 更に ドットにつなげてそのメソッドが呼び出せる— という こんな便利なところがありますので 必要に応じて使えるところに応じて— このテクニックを使っていただくと いいでしょう

JavaScriptの関数を使いこなす

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

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

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

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

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