JavaScriptのクラスを定義する

プロトタイプオブジェクトにメソッドを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Function.prototypeプロパティにメソッドを定めると、クラスのオブジェクトが共有できます。
講師:
06:16

字幕

このレッスンではクラスのプロトタイププロパティにメソッドを定めてみたいと思います。ここではクラスとしてコンストラクタ関数Point が定義されています。そしてそれを new で呼び出すとコンストラクタとして働いてインスタンスを作るわけなんですがコンストラクタ関数を定めると自動的に prototype というプロパティが設定されます。そこにはデフォルトではオブジェクトクラスのオブジェクトが定められます。ここで console.log で確認していますので一度見ておくことにしましょう。「ファイル」>「ブラウザーでプレビュー」します。Chrome が開きましたので「表示」>「開発管理」>「JavaScript コンソール」を開きます。そうすると、prototype が何かとどのオブジェクトを継承しているかということが確認できるんですがオブジェクトクラスですね。そして継承というのはこのオブジェクトクラスに定義されているプロパティやメソッドを子供が使うことができるというそういう仕組みです。このコンストラクタの Prototype プロパティにメソッドを定義することができるんですがこのコンストラクタの中でメソッドが2つ定義されています。 このコンストラクタの中でthis に定義する場合とprototype に定義する場合何が違うのかということがポイントなんですがこれは今は脇に置いといてその前に確認しておきたいことがあります。今オブジェクトを1つ作っているんですけども引数を渡していますね。もう1つ作りましょう。引数の値を変えます。obj2 にしましょう。そして new のPoint のx y とも 1 にします。ということで、console.log で結果を確認しますけれども2つのオブジェクトを引数に渡してみましょう。obj2 と。いうことで保存します。そしてブラウザーをリロードします。そうすると、2つオブジェクトが出てきました。x y の数字x は 1 で同じなんですがy の数字は違いますね。というのは違う引数を与えたからです。そして三角をクリックしてみるとちょっと改行されましたけれどそれぞれに getAnglegetLength というメソッドが定義されています。ここで注意して頂きたいのはプロパティの値が違いますよね。こちらとこちらで y が違います。違っていていいですよね。違わないと困ります。けれども getAngle、getLength これもあります。 そしてプロパティと同じようにそれぞれ別の関数としてこの中に定義されているんです。とはいえ、実際に書かれている処理内容は同じです。もしオブジェクトが 100 個あったらこの2つのメソッドは 100 倍のメモリを食ってしまうことになって無駄ですね。同じ内容なんですから。共有できると便利です。クラスのオブジェクトでメソッドを共有したいそういう時に使うのがコンストラクタ関数の prototype オブジェクトです。ここに Point の prototype としましょう。そしてそこにメソッドを定義してしまうんです。ではこの getLength のこの所コピーで持ってきましょうか。getLength 同じように定義することができます。ここにインデントを一段下げましょう。さて同様にPoint の prototype のgetAngle ですね。コピーして持ってきます。インデントを下げます。そうしたら、もうこちら要らなくなります。コメントアウトしましょう。スラッシュ アスタリスクでコメント始まりでアスタリスク スラッシュでコメント終わりということになります。ですから、コンストラクタの中のthis に対するメソッドの設定はこれで無くなりました。 代わりに、prototype に2つのメソッドを設定してあります。さて、動作結果を確認してみましょう。保存します。ブラウザーをリロードします。値は変わらないですね。引数を渡す値を変えていませんのでx は両方とも 1 ですがy の数字が違います。そして開いてみるとこの中にはメソッドがありません。というのはコンストラクタの中でthis に対するメソッドの定義はコメントで外しました。代わりに prototype の方にメソッドを定義するとprototype に設定されたメソッドというのはクラスから作られたオブジェクトが継承できる、つまり共有できることになるんですね。ここで勘違いしないで頂きたいんですがprototype にはオブジェクトのクラスが設定されていました。じゃオブジェクトのクラスにgetLength とか getAngle が設定されたかというとそうではありません。prototype にはオブジェクトクラスから作られたオブジェクトが設定されています。ですからクラスとは切り離されています。そのオブジェクトに対してgetLength getAngle というメソッドを追加したという形になります。 オブジェクトに対して追加をする時にはオブジェクト ドット メソッドとかプロパティを設定してイコールで値なり処理を定めた関数なりを設定すればいいわけですね。ですからこれは Point のクラスのprototype に対してメソッドが設定されたそれが、クラスから作られるオブジェクトに共有される、継承されるということになります。このレッスンでは function のprototype プロパティにメソッドを定めるとクラスのオブジェクトがそのメソッドを共有できるということを説明し実際にその定義の仕方を紹介しました。

JavaScriptのクラスを定義する

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

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

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

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

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