JavaScript 制御構造 新しいページはコチラ
提供: yonewiki
(→this) |
(→this) |
||
| 653行: | 653行: | ||
=== this === | === this === | ||
*this | *this | ||
| − | : | + | :このキーワードは少し前のサンプルでも使ってしまったのですが、関数をオブジェクトとして利用する際、関数内で自分自身のオブジェクトに対する操作をする場合に使うキーワードです。と、簡単に言いましたが、関数が呼び出される方法によってthisが指し示すものがことなるということを示す具体的なサンプルを紹介します。 |
| + | |||
| + | |||
| + | サンプル | ||
| + | <syntaxhighlight lang="javascript" line start="1"> | ||
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <TITLE>JavaScript this</TITLE> | ||
| + | </HEAD> | ||
| + | <BODY> | ||
| + | JavaScript this<br /> | ||
| + | <SCRIPT Language="JavaScript"> | ||
| + | <!-- | ||
| + | var Num =10000; | ||
| + | function objNewCreate(){ | ||
| + | document.write("■自作関数obNewCreate this.Num 初期値<br />"); | ||
| + | document.write("this.Num = " + this.Num + "<br />"); | ||
| + | this.Num = 5000; | ||
| + | document.write("■自作関数obNewCreate this.Num = 5000 代入後<br />"); | ||
| + | document.write("this.Num = " + this.Num + "<br />"); | ||
| + | } | ||
| + | document.write("<br />"); | ||
| + | document.write("◎Create1オブジェクト生成 new<br />"); | ||
| + | objNewCreate1 = new objNewCreate(); | ||
| + | document.write("<br />"); | ||
| + | |||
| + | document.write("■オブジェクトにぶら下げた変数プロパティの出力<br />"); | ||
| + | document.write("objNewCreate1.Num = " + objNewCreate1.Num + "<br />"); | ||
| + | document.write("■objNewCreate1オブジェクトはトップレベルのwindow = this オブジェクトの下に関連付けられている。<br />"); | ||
| + | document.write("this.objNewCreate1.Num = " + this.objNewCreate1.Num + "<br />"); | ||
| + | document.write("■objNewCreate1オブジェクトはトップレベルのwindow = this オブジェクトの下に関連付けられている。<br />"); | ||
| + | document.write("window.objNewCreate1.Num = " + window.objNewCreate1.Num + "<br />"); | ||
| + | |||
| + | document.write("<br />"); | ||
| + | document.write("■トップレベルからの関数呼び出し オブジェクト生成無し。<br />"); | ||
| + | document.write("Num = " + Num + "<br />"); | ||
| + | objNewCreate(); | ||
| + | document.write("Num = " + Num + "<br />"); | ||
| + | --> | ||
| + | </SCRIPT> | ||
| + | </BODY> | ||
| + | </HTML> | ||
| + | </syntaxhighlight> | ||
| + | [[Media:JavaScript SeigyoKozo this.html|実行結果サンプル]] | ||
| + | |||
| + | 関数内のthisはオブジェクトの生成時は新しく生成したオブジェクトがthisの中身になっています。そして、生成したobjNewCreate1.Numの値を出力していますが、実はこのトップレベルに生成したオブジェクトもトップレベルのオブジェクトの下にぶら下がっていて、thisが省略されているのです。同じ階層の中での呼び出しでは省略ができるということです。そして、this=トップレベルといいましたが、実際はwindowというオブジェクトの下に新しく定義・生成したオブジェクトがぶら下がっています。 | ||
| + | |||
| + | |||
| + | ここまでの説明、なかなか複雑です。 | ||
| + | |||
| + | |||
| + | そして、サンプルの後半では定義した関数をオブジェクトとしてではなく、直接にトップレベルから呼び出し実行させると、そのときのthisはトップレベルであるwindowオブジェクトがthisに相当する内容として関数内ではthisをwindowとして扱います。そうすると、関数の一番最初のthisでは、プログラムの最初に定義したトップレベルにあるNumを指していることになります。これには初期値として10000という値が保持されていますので、最初は10000と出力されますが、関数内で5000と書き換えているので、this.Numはもちろん関数内で5000に変わります。そして、外部で定義した10000という値も5000に変更されていることが最後の出力によって確かめることができます。 | ||
| + | |||
| + | |||
| + | このようにthisというキーワードは自分自身を指すといいましたが、オブジェクトが生成されたときに呼び出されるときと、直接呼び出されるときとで保持している内容が違うということが理解しておくポイントになります。 | ||
| + | |||
| + | |||
| + | 通常は、このようにオブジェクト生成して使う方法と、直接呼び出すことを併用するようなプログラムの記述はしません。オブジェクトを生成して使うための関数は常にオブジェクトを生成して利用するようにします。直接呼び出したりするとthisの保持内容がいれかわるし、扱いにくくなります。 | ||
| + | |||
| + | |||
| + | なんとなくややこしい部分ですがサンプルプログラムの動作結果をよく見ながらサンプルを眺めれば、どういう順序で理解していけると思います。頑張られたし。 | ||
=== with 省略表記 === | === with 省略表記 === | ||
