JavaScriptの関数を使いこなす

コンストラクタからインスタンスをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
関数はクラスのコンストラクタとして定めて、インスタンスをつくることができます。
講師:
07:12

字幕

このレッスンでは 関数をクラスのコンストラクタとして定めて そのコンストラクタからインスタンスを作る という方法についてご説明します Dreamweaver CC で開いている HTML ドキュメントには まだ― JavaScript コードが 何も書かれていません ここに 関数を定義しましょう 関数は function のキーワードで スタートします そして 名前は Product と 中括弧始まり中括弧閉じ ということです 頭が大文字になっています これは 関数をクラスのコンストラクタとして 定めたいと思います そのクラスのコンストラクタにする場合には 名前を― 頭を大文字にする という習慣になっています 小文字でも別にエラーは起こりませんし 問題はないですけれども 頭が大文字だと― あっ これは関数だけれども クラスのコンストラクタなんだな― ということが分かるので この習慣には従っておいたほうがいいでしょう これで もうコンストラクタは 出来上がりました 勿論空っぽですので― 実質的な機能はほとんどありませんが インスタンスは作れます では インスタンスを作るには― まずインスタンスを入れる変数ですね obj としましょう コンストラクタを呼ぶ場合には 頭に new という演算子― キーワードを付けてその後― 関数の名前 クラス名といってしまっていいですが― 定めて 括弧括弧は 普通の関数の呼び出しと同じです 特に return という キーワードがないですが これでオブジェクトが作られて 変数の中に入ります 確認しましょう console の log で obj として 保存を押したら ブラウザでプレビューしましょう ブラウザの JavaScript コンソールを出して― console.log の結果を確認します Product という クラス名が表示されていますね ただ勿論 実質何もやっていませんので 中身は空っぽです このアンダースコアダブルの proto というのは― ちょっと忘れておいてください 空っぽだと考えていただいて結構です では 一旦クリアして― HTML ドキュメント Dreamweaver に戻りましょう この Product という クラスのインスタンスに プロパティを定めたいと思います その場合には このオブジェクトを 作ってしまってから obj. でプロパティを加えることも 勿論できます でもクラスの場合によくあるのは このコンストラクタに― 引数で渡したものがプロパティになる と それにしたいと思います Dreamweaver CC としましょう これを渡します 渡されたら これは関数一般の規則に従いますけど それを受け取る引数が必要になります ここでは name という 引数名にしましょう ついでですから もう1つぐらい引数を渡します カンマ区切りで― バージョンが 現在 16.0 となっていますので 文字列で 16.0 と渡します では受け取る方も やはり 引数の変数が必要ですね version と そのままでは 当然オブジェクトの プロパティには定められません プロパティにする という処理が 加わらなければいけません まず どういう名前のプロパティ名にしようか ということですが― 同じ名前にしましょう name と version にしましょう ではこのオブジェクトに まず name というなまえのプロパティを― 設定しましょうということで このオブジェクトに という this というキーワードを必ず入れます そしてプロパティ名です name として― 値はこの引数が受け取っている name ですね コピーを持ってきます これ 注意してください こちらの name は― この Product に対する プロパティ名です そしてこっちの name は― name という引数名になっていますが 実際に受け取るのは この文字列です ですから 作られるインスタンス― オブジェクトの name という プロパティに― Dreamweaver CC という文字列が 設定されます 同様に― このオブジェクトの― version というプロパティを 設定して そこに version に入っている 実際には 16.0 という文字ですが― を定めましょう ということになります ではもう一度保存をして― ブラウザで確認しましょう ブラウザのページをリロードします そうすると 先程とは違って 中身があるので― 中身はきちんと表示されますね name のプロパティに Dreamweaver CC が入っています― version のプロパティに 16.0 という 文字列で数字が入っています クラスですから インスタンスはいくつでも作れます 一個作ってみましょう あと追加で 変数 obj ちょっと名前変えましょう Dreamweaver ですので― dw という風にしましょう そうすると ここも dw ですね インスタンスをまた作ります fl ― 見当は付きますね new の Product で― コピーを持ってきます 文字列で指定しますけれども― Flash Professional CC とします バージョンは1個低くて 15.0 です そしてインスタンスは fl に入りました console.log もう1つオブジェクトを入れた変数 fl を 入れましょう そして保存して確認してみます ブラウザのほうに移ります ブラウザをリロードしましょう そうすると 両方とも Product の クラスのインスタンスなんですが 中身はもちろん 別々ですね インスタンスは別なので 片っ方は― Dreamweaver CC の 16.0 もう1つは Flash Professional CC の 15.0 ということで インスタンスが2つ作られました このレッスンでは関数を― コンストラクタとして定める方法について ご説明しました その場合― コンストラクタの呼び出しは new で 関数名ということになります プロパティとして設定する時には必ず― this. でプロパティ名を 定めるようにしてください

JavaScriptの関数を使いこなす

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

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

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

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

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