×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
連想配列とは各種のKEYに対応する値を持つ配列の様なものであると「連想配列の作成と初期化について」で説明しましたが、 JavaScriptには実際には連想配列は存在せず、オブジェクトのプロパティとして扱うことで連想配列的に扱えます。 以下の様な例があります。
連想配列的宣言
1 2 3 4 5 6 7 8 9 10 11 12 13 | //連想配列の宣言(実際はオブジェクト)var arrVar = { item: "test1", value: 100, func: function() { // 関数の宣言 console.log("TEST"); }};//配列内の値表示console.log(arrVar["item"]); // test1 と表示されるconsole.log(arrVar["value"]); // 100 と表示される//関数の実行arrVar.func(); // TEST と表示される |
上の例では arrVar に関数 func を宣言していますが、このままだと何も意味のある処理ではないので arrVar が持つプロパティを表示する様にしてみます。
そこで必要になるのが this キーワードです。 this 「これ」って何といった感じですが、 this が存在するオブジェクトの親オブジェクトを指すと理解すれば良いと思います。
論より実際の処理を見ると分かりやすいです。上の例に少し修正を加えます。
this を使った連想配列の項目アクセス
1 2 3 4 5 6 7 8 9 10 11 12 13 | //連想配列の宣言(実際はオブジェクト)var arrVar = { item: "test1", value: 100, func: function() { // 関数の宣言 var str = ""; str += "item = " + this.item; str += ",value = " + this.value; console.log(str); }};//関数の実行arrVar.func(); // item=test1,value=100 と表示される |
関数 func が呼ばれた時には this が指し示すオブジェクトは、 関数オブジェクト func が属する親オブジェクトになりますので arrVar を指しそれのプロパティへのアクセスが可能になります。
いわゆるオブジェクト参照の変数ですので this を別の変数に代入しても利用できます。
this を使った連想配列の項目アクセスその２
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | //連想配列の宣言(実際はオブジェクト)var arrVar = { item: "test1", value: 100, add: function(pVal) { // value に加算する関数宣言 this.value += pVal; }, func: function() { // 関数の宣言 var obj = this; // this を別の変数に代入 var str = ""; str += "item = " + obj.item; str += ",value = " + obj.value; console.log(str); }};//関数の実行arrVar.add(100);//関数の実行arrVar.func(); // item=test1,value=200 と表示される |
関数 func では this を別の変数に代入して処理を行っています。 add という関数を追加してありますが、これは引数の値をプロパティ value に加算処理を行います。
今回使用した this は奥が深いキーワードでいろんな場所で使えるのですが、 詳しい説明は又の機会にしたいと思います。
関連する記事
⇒JavaScript 配列の作成と初期化について⇒JavaScript 連想配列の作成と初期化について
⇒JavaScript 配列の操作について
⇒JavaScript 配列の繰り返し処理(for, for…in, for…of, Array.forEach)
⇒JavaScript 配列と Object.keys 、Object.values 及び Object.entries について
⇒JavaScript 連想配列の操作について（this キーワード）
⇒JavaScript 関数の宣言について(function)
⇒JavaScript thisキーワードについて
⇒JavaScript Dateオブジェクトの使い方（Date）
⇒JavaScript Dateオブジェクト（Date）を操作する関数を作成
⇒JavaScript Stringオブジェクトの使い方（ハマりそうな点）
⇒JavaScript 数値の小数点以下の丸め処理(Math.floor, Math.round, Math.ceil)
おすすめ本
コメント