JavaScriptのクラスを定義する

コンストラクタ関数を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラスのインスタンスをつくるコンストラクタ関数の定め方についてご説明します。
講師:
05:32

字幕

このレッスンではクラスのインスタンスを作るコンストラクタ関数という関数の定め方について説明します。今 HTML ドキュメントを開いていますがここにはまだスクリプトが書かれていません。そもそも script 要素が無いのでそれを加えていきましょう。head の中に script として閉じます。コンストラクタ関数というのは特別な処理をする関数なんですけども定め方は普通の関数と変わりません。ですから、function でスタートして今回は Point というクラス名にします。クラス名を付け ( ) { } ということになります。これでもうコンストラクタ関数は出来上がりました。空っぽですから、実質的には何もしないんですけどもそれでも処理はできます。ですからここでテストをしましょう。test としてコンストラクタ関数は関数の定め方は普通と一緒なんですけども呼び出し方が違います。new 関数名で呼び出します。そしてインスタンスを作りますのでその作ったインスタンスを納める変数を宣言します。ここでは var 宣言をしてオブジェクトの意味でobj としておきましょう。代入をします。今申し上げた通りnew という演算子を付けてPoint( ) ということでこれでインスタンスが出来上がりました。 コンソールのログで確認してみましょう。そして obj を見てみます。一回保存してそして今 Dreamweaver CC でコードを書いているんですが「ブラウザーでプレビュー」で見ることができます。Chrome で見ることにしましょう。勿論、何も表示されませんけれどもコンソールで確認することができますので「表示」>「開発管理」>「JavaScript コンソール」これは Option+Command+J で出すこともできます。そうすると、コンソールでオブジェクトが表示されました。Point というクラス名が付いています。そして中を見ると、アンダースコアが2つあってproto アンダースコア2つとこれは重なるどんなオブジェクトでも持っているものなんですがそれがあるだけで空っぽです。空っぽではなんですのでプロパティを追加することにしましょう。プロパティの加え方は普通のオブジェクトと一緒です。ですから、オブジェクトを作った後にオブジェクトを参照してx というプロパティを作ります。1を代入ですね。では y も、ということでy を2とします。では保存をしてブラウザーで確かめてみましょう。先程のコンソールの表示が残っていますけれどもリロードをすればここが更新されますのでリロードします。 そうすると x が1y が2ということでプロパティが設定されました。もう少しクラスの設定を変えてみたいと思います。折角クラスを定めたんですからこの x y というプロパティ引数で渡せると良いですね。渡せるようにしましょう。コメントアウトしてしまいます。ダブルスラッシュですね。そして引数で渡すということはx を最初に、2番目に y ということでx y の値を Point のコンストラクタに渡します。そうするとコンストラクタの方ではこれを受け取るということになりますので受け取る引数は分かりやすいようにx y にしておきましょう。そうしたら処理が必要になりますのでここで処理を加えます。x y というプロパティを作りたいこのオブジェクトに作りたいですね。そういう場合には、作られるオブジェクトはこのコンストラクタの中でthis で参照できます。ですから this の x に引数の x を設定します。引数と this のx これは別々ですので引数の値を this の x というプロパティに設定した、ということになります。同様に y のプロパティに引数 y の値を入れます。そして保存をして確認しましょう。 もう一度ブラウザーをリロードします。コンソールが一瞬消えて改めて出てきます。同じものが出てきたと思うかもしれませんが結果は同じでいいわけですね。x と y に1と2というプロパティ値が定められました。でもちょっと気になりますので数字を変えてみましょう。ここを、それでは2にしてこっちを1にしましょう。そして保存をします。リロードすると今度は数字が反対になりましたね。ちゃんと動いているということです。このレッスンではクラスのインスタンスを作るコンストラクタ関数の定め方を説明しました。コンストラクタ関数と言っても特別な定義の仕方ではありません。関数名を付けた function として定義をしてただし、呼び出す時に new という演算子を付けて呼び出します。引数をプロパティに設定したい時にはこの関数の中で this でオブジェクトが参照できるということも覚えておいてください。

JavaScriptのクラスを定義する

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

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

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

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

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