JavaScriptのクラスを定義する

プロトタイプにプロパティを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Function.prototypeプロパティには、プロパティを定めることもできます。
講師:
04:24

字幕

このレッスンでは、Function のprototype プロパティにプロパティを定めてみたいと思います。prototype プロパティにメソッドをここでは定めていますけれどもさらにプロパティを prototype プロパティに定めることもできます。コンストラクタ関数、ポイントは引数を2つ受け取ってそれぞれを x と y というプロパティに設定しているわけですけれどもこの2つのメソッドと同じようにprototype プロパティにプロパティを定めてみたいと思います。では、まず改行してコンストラクタの名前ですねPoint として prototypeそして、y というプロパティを設定したいと思います。その時に例えば .y=100 とこう書いても結構です。けれども、prototype のプロパティにはデフォルトでオブジェクトが設定されます。それはオブジェクトクラスのインスタンスですからこう書いたのと同じことなんですね。同じオブジェクトで上書きしたという事ですから結果は変わらないですけれどもで、あればこの中にプロパティを定めてしまうということもできます。y はここに設定しているんで、ここはコメントアウトしましょう。 そしてテスト用のコードを書きます。オブジェクトを一個作りましょう。obj という変数名でnew Point のx だけ設定します。y はなしということですね。そしてこれをconsole.log でまずオブジェクトを確認し、オブジェクトの x というプロパティとy というプロパティを確認する事にしましょう。では、いったん保存します。そして、ブラウザーでプレビューしましょう。Chrome が開きましたので「表示」メニューから「開発/管理」で「JavaScript コンソール」を出します。そうすると、1 と 1001 は引数が渡した1 ですね。100 はprototype プロパティのy というプロパティ設定した値です。ちゃんと出ていますね。そして、Point のオブジェクトの中身が見られるんですけれどもここを見てみるとx しかないとそうですね、y はprototype のプロパティに定めました。それは、この _proto_ とこの中に設定されているんですがここに 100 とあるわけです。ですから、設定されている場所が違う訳です。オブジェクト自身に xその継承といいますけれども継承しているオブジェクトの方にy が設定されています。 では、このコンソールで引き続き試しましょう。例えば、obj.y = 2 とします。Enter キーを押しますと2と出てきましたね。では、obj とタイプしてEnter キーを押すと今度は、オブジェクト自身に対してx のプロパティの他にy が加わりました。では消します。Delete で消えるんですけれどもobj.y とtrue というのはうまくいきましたよという事ですのでもう一回 obj. y と打ってみましょう。そうすると、100 と出てきました。つまり、一旦オブジェクトに設定されたy が消されてしまいました。でも、prototype の方には設定が残っています。確認しましょうか。obj で Enter キーを押してx=1 だけなんですけれどもprototype の方に100 があるのでそれが参照されて、obj.y で100 が出てきたという事になります。このレッスンでは、Function のprototype プロパティにプロパティを設定しました。ここですね。これは、prototype プロパティに設定された継承されず値ということでオブジェクト自身のプロパティとは一応区別されると。ただし、オブジェクト自身にプロパティがない時は prototype を辿ってその設定されたプロパティが参照できるという事をご説明しました。

JavaScriptのクラスを定義する

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

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

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

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

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