JavaScriptの関数を使いこなす

コンストラクタにメソッドを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プロトタイプオブジェクトを使って、クラスのコンストラクタにメソッドが定められます。
講師:
08:38

字幕

このレッスンでは クラスのコンストラクタに メソッドを定めてみたいと思います 今 Dreamweaver で開いている HTML ドキュメントには― クラスが2つ定められています コンストラクタとして Dreamweaver ― それから Flash です 引数もどちらも2つあって year と version ですね 呼び出しをしています Dreamweaver のほうには― Dreamweaver 2015 が最新で バージョン最新の 16.0 が 文字列で渡されています Flash のほうは同様に 2015 と バージョンは 15.0 です そして console.log で 2つのインスタンスを― ログとして表示するようにしています では 確認してみましょう ファイルで 「ブラウザーでプレビュー」をします JavaScript コンソールを出しましょう そうすると Dreamweaver 畳まれていますけれども 広げると― クラス名 Dreamweaver と 16.0 ― year 2015 というのが表示されます Flash のほうも同じ要領ですが クラス名として Flash ― バージョンが 15.0 year は 2015 で同じですね では― HTML ドキュメントのほうに戻りましょう ところで className のほうは どちらもコンストラクタの中に― 値が決め打ちになっています 引数から渡されたのではなくて もう 値が決まっていて― このクラス名 コンストラクタの名前を そのまま文字列で代入しています さて 例えば alert で― window ― とすると window オブジェクトの 文字列表示が表現されます 「保存」を押しまして では ブラウザで確認してみましょう 「ファイル」から 「ブラウザでプレビュー」をします 警告のダイアログに object window と出てきました window のオブジェクトですよ と 示していますが― 必ずしも このように クラス名が出てくるとは限りません では OK を押して― HTML ドキュメント Dreamweaver のほうに戻りましょう alert メソッドの中身を書き換えます window から― dw これは Dreamweaver の クラスのインスタンスが入っていますね 一度保存します 確認してみましょう Dreamweaver で ライブの設定になっていると― Dreamweaver 側でも 警告が出てしまうので ここは― 「デザインに切り替えておきます そしてファイルを保存して ブラウザでプレビューしましょう object Object という表示が 出てしまいました object Dreamweaver とは 出てこないです 出すためには そのためのメソッドを Dreamweaver のクラスに― コンストラクタに 定めておかなければいけません window はそれが定められているので object window と出ましたが Dreamweaver や Flash のほうにもそうですけれども toString が定められていないので それを加えたいと思います では OK を押して Dreamweaver のほうに戻りましょう コンストラクタ Dreamweaver のほうに― メソッドを定めたいと思います toString という もう名前の決まっているメソッドです では Dreamweaver という コンストラクタを― コピーして持ってきます そして そこにプロパティを定めます 但し ここにいきなり toString という 関数の名前を設定する― ということはありますが ちょっと意味が違ってきます ここで先程の alert のダイアログの時に Dreamweaver と出したい場合には― prototype というプロパティに対して― その 定めるメソッド名 toString を 定義してあげる必要があります そして この toString プロパティ と考えて結構です ということは ここに定める関数は 名前を定める必要がありません 名前のない関数で結構です そして toString メソッドは 引数を取らないという風に決まっています 後は この中で文字列を作って それを返してあげると― その返した文字列が 先程の アラートダイアログに表示される事になります ではもう返しましょう return としてしまって― 掲載は一緒にしたいので― 中括弧の― 角括弧のオブジェクトですね そして ワンスペース空けて― Dreamweaver というのは― className というプロパティに 入れてありますので― これをコピーして持ってきます そして― 角括弧閉じですね これをリターンしてあげると この文字列が― ダイアログのほうに表示されるはずです では 保存して ブラウザでプレビューしてみます object Dreamweaver と 表示されました では OK を押して Flash のほうにも設定したいと思います Flash のほうも同じようにですね― ここに― Flash.prototype.toString ですね = また function と書かなくても 大丈夫です 実はですね― これを― ちょっと改行しましょうか 改行しまして― Flash.prototype.toString この prototype というのが― クラスにメソッドを定義する時の プロパティになります クラスにプロパティ prototype というものを持っていますが― そのオブジェクトに設定したメソッドが クラスのメソッド という風になります 今移動しましたが― Dreamweaver.prototype.toString = 改行は気にしないで結構です Flash.prototype.toString = function このようにイコール プロパティ イコール プロパティ 或いは 変数イコール変数という風に 結んでしまって― 串刺しの代入というのができます この場合には Dreamweaver の prototype の toString にも― Flash の prototype の toString にも― 同じ 名前のないこの関数が代入されます つまり function は1つで― それを この2つで 共に共用する という形になります ですから 1つ1つに関数を定めるよりは その分 メモリとしては― ちょっとだけですが お得になるというわけです ではセミコロンで代入文終了 と ここまでで 全部まとめて 1つの代入文 となっています alert を毎回出すのもうっとおしいので コメントアウトして― console.log の時には― toString と 明確に呼んであげる必要があります Flash のほうも― toString と 保存して ブラウザのほうで確認してみましょう JavaScript コンソールは 出してありますので リロードします そうすると object Dreamweaver object Flash と出て― それぞれに toString のメソッドが コンストラクタに対して定義された ということが分かります このレッスンでは クラスのメソッドを コンストラクタの prototype に対して 定義する という方法についてご説明しました この prototype. で メソッドを設定してあげれば クラスのメソッドとして 呼び出すことができます

JavaScriptの関数を使いこなす

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

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

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

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

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