【JavaScript 中級講座】プロパティと関数を動的にオブジェクトへ追加する
[JavaScript 中級講座]プロパティと関数を動的にオブジェクトへ追加する
目次
本講座では、オブジェクトの基礎的な内容を学習する。
学習内容は、オブジェクトの表面的な部分にとどめる。
ここで深く学習する事は無い。
無理をせず、のんびりステップバイステップで学習していく。
本講座のポイントは、オブジェクトにプロパティや関数を追加する方法である。
一度作成したオブジェクトに、後からプロパティや関数を追加する。
そのサンプルプログラムを見て行く。
オブジェクトにプロパティを追加する
001<script>
002//オブジェクトを作成
003const player = { } ;
004
005//プロパティを追加
006player.name = "IORI" ;
007
008//表示[IORI]
009alert ( player.name ) ;
010</script>
002//オブジェクトを作成
003const player = { } ;
004
005//プロパティを追加
006player.name = "IORI" ;
007
008//表示[IORI]
009alert ( player.name ) ;
010</script>
プログラムを実行すると、「IORI」と表示する。
プログラムを解説する。まず3行目で変数playerを宣言して、空のオブジェクトを代入する。
| 変数 | オブジェクト |
| player | { } |
コンピューターはこのような状態になる。
プログラムの6行目で、変数playerが参照するオブジェクトのnameプロパティに、
文字列「IORI」を代入する。
ここで解説が必要になる。いま、変数playerが参照するオブジェクトは空である。
つまり、空のオブジェクトにnameプロパティは存在しない。
6行目でnameプロパティに文字列を代入しているが、
これはエラーにならないのだろうか？
ならない。
オブジェクトのプロパティに値を代入する
オブジェクト.プロパティ名 = [ 値 ] ;
このように値を代入する。
オブジェクトに存在しないプロパティへ値を代入
自動的に、オブジェクトにプロパティが生成され、値が代入される。
指定したプロパティがオブジェクトに存在しない場合、自動的にプロパティが作られ、 そのプロパティに値が代入される。
001<script>
002//オブジェクトを作成
003const player = { } ;
004
005//プロパティを追加
006player.name = "IORI" ;
007
008//表示[IORI]
009alert ( player.name ) ;
010</script>
002//オブジェクトを作成
003const player = { } ;
004
005//プロパティを追加
006player.name = "IORI" ;
007
008//表示[IORI]
009alert ( player.name ) ;
010</script>
6行目で変数playerが参照するオブジェクトのnameプロパティに文字列「IORI」を代入する。 オブジェクトにnameプロパティが存在しないため、自動的にnameプロパティが生成され 文字列「IORI」が代入される。
| 変数 | オブジェクト |
| player | { name : "IORI" } |
オブジェクトにnameプロパティが追加されて、文字列「IORI」が代入された。 便利だ。9行目で、変数playerが参照するオブジェクトのnameプロパティを表示する。 「IORI」と表示して終了する。
文字列を指定してプロパティに値を代入する
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティを追加
006player [ "image" ] = "player01.png" ;
007
008//表示[player01.png]
009alert ( player.image ) ;
010</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティを追加
006player [ "image" ] = "player01.png" ;
007
008//表示[player01.png]
009alert ( player.image ) ;
010</script>
プログラムを実行すると、「player01.png」と表示する。
解説する。3行目でオブジェクトを生成して変数playerへ代入する。
| 変数 | オブジェクト |
| player | { name : "IORI" } |
オブジェクトのnameプロパティに文字列「IORI」が入っている。
6行目で、変数playerが参照するオブジェクトのimageプロパティに文字列「player01.png」を代入する。
オブジェクトのプロパティに値を代入する
オブジェクト [ "プロパティ名" ] = [ 値 ] ;
オブジェクトのプロパティに値を代入する際、
プロパティ名を中括弧の中に記述する方法もある。
この記述方法は、配列と似ている。
配列はインデックス、すなわち整数で値を管理していた。
オブジェクトは名前（プロパティ名）で値を管理する。
こうやって見ると、オブジェクトと配列は似ているし、対比させて考えてしまう。
しかし、そもそもオブジェクトと配列はまったく異なる考え方の中に存在する。
配列はJavaScriptの機能の一つである。
オブジェクトはJavaScriptの全てである。
6行目が実行すると、次のようになる。
| 変数 | オブジェクト |
| player | { name : "IORI" , image : "player01.png" } |
imageプロパティに値を代入する際、 imageプロパティが自動的に作られ、値が代入する。
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティを追加
006player [ "image" ] = "player01.png" ;
007
008//表示[player01.png]
009alert ( player.image ) ;
010</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティを追加
006player [ "image" ] = "player01.png" ;
007
008//表示[player01.png]
009alert ( player.image ) ;
010</script>
9行目で変数playerが参照するオブジェクトのimageプロパティの値を表示する。 imageプロパティは、6行目のように、文字列でプロパティを指定して値を代入した。 しかし、プロパティはプロパティである。 9行目のように
オブジェクト.プロパティ名
このように値を取り出す事ができる。 9行目を実行すると、「player01.png」と表示する。
変数を利用してオブジェクトのプロパティに値を代入する
今後学習する内容の、準備段階的なプログラムを見る。
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティ名
006const field = "name" ;
007
008//表示[IORI]
009alert ( player [ field ] ) ;
010</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティ名
006const field = "name" ;
007
008//表示[IORI]
009alert ( player [ field ] ) ;
010</script>
プログラムを実行すると、「IORI」と表示する。
3行目でオブジェクトを生成する。
| 変数 | オブジェクト |
| player | { name : "IORI" } |
6行目で変数fieldに文字列「name」を代入する。
9行目で・・・、んっ？何をやっているのだ？
まずは、変数fieldの中身を取り出そう。
変数fieldの値は文字列「name」である。
008//表示[IORI]
009alert ( player [ "name" ] ) ;
009alert ( player [ "name" ] ) ;
これは、変数playerが参照するオブジェクトのnameプロパティを利用するプログラムである。 nameプロパティの値は「IORI」なので、プログラムを実行すると「IORI」と表示する。
オブジェクトのプロパティと値を取り出す
オブジェクトにプロパティと値を追加する方法を学習した。 こんかいは、追加したプロパティと値を取り出す方法を学習する。
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティを追加
006player [ "image" ] = "player01.png" ;
007
008//プロパティを取得
009const keys = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; i < keys.length ; i ++ ) {
013 var key = keys [ i ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
016</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//プロパティを追加
006player [ "image" ] = "player01.png" ;
007
008//プロパティを取得
009const keys = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; i < keys.length ; i ++ ) {
013 var key = keys [ i ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
016</script>
プログラムを実行すると、「name is IORI」と「image is player01.png」と表示する。
3行目でオブジェクトを生成し、変数playerへ代入する。 6行目で、変数playerが参照するオブジェクトのimageプロパティに文字列「player01.png」を代入する。 この時点で、変数playerが参照するオブジェクトの状態は次の通りである。
| 変数 | オブジェクト |
| player | { name : "IORI" , image : "player01.png" } |
008//プロパティを取得
009const keys = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; i < keys.length ; i ++ ) {
013 var key = keys [ i ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
009const keys = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; i < keys.length ; i ++ ) {
013 var key = keys [ i ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
9行目でObject.keys()関数を実行する。
Object.keys()関数
引数で指定したオブジェクトのプロパティを全て取得して、配列で戻す。（必ずしも正確な表現ではないが、今はこれで良い）。
Object.keys()関数の利用方法
const keys = Object.keys ( [オブジェクト] ) ;
Objectオブジェクトに入ったkeys()関数を実行すると、 引数に渡したオブジェクトのプロパティを全て取得して、配列で戻してくれる。 オブジェクトのプロパティは複数存在する事が予想されるので、 複数の値を保持できる配列で実行結果が戻る。 戻り値の配列には、オブジェクトのプロパティが入っている。
| 変数 | オブジェクト |
| player | { name : "IORI" , image : "player01.png" } |
いま、変数playerが参照するオブジェクトには、「name」と「image」の2つのプロパティが存在する。 Object.keys()関数を実行すると、「name」と「image」が入った配列が戻される。
008//プロパティを取得
009const keys = Object.keys ( player ) ;
009const keys = Object.keys ( player ) ;
Object.keys()関数の実行結果を変数keysで受け取る。
| インデックス | 値 |
| 0 | name |
| 1 | image |
変数keysには、このような配列が代入される。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; i < keys.length ; i ++ ) {
013 var key = keys [ i ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; i < keys.length ; i ++ ) {
013 var key = keys [ i ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
9行目で変数playerが参照するオブジェクトのプロパティを取得して、
戻り値の配列を受け取る。その配列には「name」と「image」が入っている。
12行目から15行目までが、forブロックである。forブロックで、オブジェクトのプロパティと値を取り出して表示する。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 0 < 2 ; i ++ ) {
013 var key = keys [ 0 ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 0 < 2 ; i ++ ) {
013 var key = keys [ 0 ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
for文は配列keysの要素数、すなわち「2」回実行する。まず変数iの値は「0」である。13行目で、 変数keysの配列からインデックス「0」を指定して値を取得し、変数keyへ代入する。
| インデックス | 値 |
| 0 | name |
| 1 | image |
変数keyに「name」が入る。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 0 < 2 ; i ++ ) {
013 "name" = keys [ 0 ] ;
014 alert ( "name" + " is " + player [ "name" ] ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 0 < 2 ; i ++ ) {
013 "name" = keys [ 0 ] ;
014 alert ( "name" + " is " + player [ "name" ] ) ;
015}
変数keyに「name」が入る。
| 変数 | オブジェクト |
| player | { name : "IORI" , image : "player01.png" } |
14行目のplayer["name"]の値は、 文字列「IORI」である。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 0 < 2 ; i ++ ) {
013 "name" = keys [ 0 ] ;
014 alert ( "name" + " is " + "IORI" ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 0 < 2 ; i ++ ) {
013 "name" = keys [ 0 ] ;
014 alert ( "name" + " is " + "IORI" ) ;
015}
14行目で文字列結合して、「name is IORI」と表示する。
forブロック実行2回目を見る。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 1 < 2 ; i ++ ) {
013 var key = keys [ 1 ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 1 < 2 ; i ++ ) {
013 var key = keys [ 1 ] ;
014 alert ( key + " is " + player [ key ] ) ;
015}
変数iの値が「1」になる。13行目で配列keysからインデックス「1」の値を取得して、 変数keyへ代入する。
| インデックス | 値 |
| 0 | name |
| 1 | image |
変数keyの値は「image」である。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 1 < 2 ; i ++ ) {
013 "image" = keys [ 1 ] ;
014 alert ( "image" + " is " + player [ "image" ] ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 1 < 2 ; i ++ ) {
013 "image" = keys [ 1 ] ;
014 alert ( "image" + " is " + player [ "image" ] ) ;
015}
変数keyに「image」が入る。
| 変数 | オブジェクト |
| player | { name : "IORI" , image : "player01.png" } |
変数playerが参照するオブジェクトのimageプロパティの値は、文字列「player01.png」である。
008//プロパティを取得
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 1 < 2 ; i ++ ) {
013 "image" = keys [ 1 ] ;
014 alert ( "image" + " is " + "player01.png" ) ;
015}
009[name,image] = Object.keys ( player ) ;
010
011//[name is IORI][image is player01.png]と表示
012for ( var i = 0 ; 1 < 2 ; i ++ ) {
013 "image" = keys [ 1 ] ;
014 alert ( "image" + " is " + "player01.png" ) ;
015}
14行目で文字列結合して、「image is player01.png」と表示する。
オブジェクトにプロパティが存在しない場合
軽いプログラムを一つ。
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//表示[undefined]
006alert ( player.image ) ;
007</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//表示[undefined]
006alert ( player.image ) ;
007</script>
プログラムを実行すると、「undefined」と表示する。
3行目でオブジェクトを生成して変数playerへ代入する。 6行目で変数playerが参照するオブジェクトのimageプロパティの値を表示する。 オブジェクトにimageプロパティは存在しない。 オブジェクトに存在しないプロパティの値を取得しようとした場合、「undefined」が戻る。 「undefined」と表示してプログラムは終了する。
オブジェクトに関数を動的に追加する
いままで、オブジェクトのプロパティに値を代入する方法を見た。 こんかいは、関数に注目する。
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" ) ;
008 }
009//関数を実行[走る]
010player.run () ;
011</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" ) ;
008 }
009//関数を実行[走る]
010player.run () ;
011</script>
プログラムを実行すると、「走る」と表示する。
3行目でオブジェクトを生成して、変数playerへ代入する。6行目で・・・、 6行目でrun、ラン・・・。
オブジェクトへ関数を動的に追加する方法
オブジェクト.[関数名] = function ( [引数]... ) { プログラム
return [戻り値] ;
}
オブジェクトに関数を追加する場合、このように記述する。
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" ) ;
008 }
009//関数を実行[走る]
010player.run () ;
006player.run = function ( ) {
007 alert ( "走る" ) ;
008 }
009//関数を実行[走る]
010player.run () ;
プログラムの6行目で、run()関数をオブジェクトへ追加する。
6行目のイコール記号の右側、function から8行目までが、
関数の定義である。
この関数は、引数無し、戻り値無しの関数である。
7行目が、関数の処理である。関数が実行すると、
「走る」と表示する。ただ6行目は、
関数を定義しているだけなので、今は実行しない。
6行目のイコール記号の左側に注目する。
定義した関数を、変数playerが参照するオブジェクトに
関数名「run」で追加する。
| 変数 | オブジェクト |
| player | { name : "IORI", run : function } |
オブジェクトにrun()関数が追加される。
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" ) ;
008 }
009//関数を実行[走る]
010player.run () ;
006player.run = function ( ) {
007 alert ( "走る" ) ;
008 }
009//関数を実行[走る]
010player.run () ;
10行目で変数playerが参照するオブジェクトのrun()関数を実行する。
オブジェクトの関数を実行
オブジェクト.[関数名] ( [引数]... ) ;
関数名の語尾に括弧をつけると、関数が実行する。 オブジェクトの中に関数が入っている場合は、
オブジェクト.[関数名] ( [引数]... ) ;
このように、オブジェクトの後ろにドットを記述して、次に関数名を記述して、括弧を記述する。
関数に引数が定義されている場合は、引数を記述する。
このように記述すると、関数は実行する。
10行目で
run()関数を実行すると、7行目が実行する。
「走る」と表示してプログラムが終了する。
オブジェクトとthisキーワード
001<script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + this.name ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
011</script>
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + this.name ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
011</script>
プログラムを実行すると、「走るIORI」と表示する。
少し難しいが、thisキーワードを見る。
まず3行目でオブジェクトを生成して変数playerへ代入する。
6行目でオブジェクトにrun()関数を追加する。
run()関数の処理であるが、
thisが利用されている。
thisとは
オブジェクトを意味する。
thisはオブジェクト自身を示している。 よし、このまま進む。
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + this.name ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + this.name ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
10行目で、変数playerが参照するオブジェクトのrun()関数を実行する。 ここで7行目の処理が実行する。 7行目は文字列「走る」と「this.name」を文字列結合する。 this.name のthisは、 関数が実行しているオブジェクトを示している。 いま関数は、変数playerが参照するオブジェクトの中で実行している。 つまり、thisはこのオブジェクトを意味する。
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + { name : "IORI" }.name ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + { name : "IORI" }.name ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
thisをオブジェクトに置き換えた。このオブジェクトのnameプロパティの値が取り出される。
002//オブジェクトを作成
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + "IORI" ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
003const player = { name : "IORI" } ;
004
005//関数を追加
006player.run = function ( ) {
007 alert ( "走る" + "IORI" ) ;
008 }
009//関数を実行[走るIORI]
010player.run () ;
プログラムを実行すると、「走るIORI」と表示する。
まとめ
オブジェクトのプロパティに値を代入する
オブジェクト.プロパティ名 = [ 値 ] ;
オブジェクトに存在しないプロパティへ値を代入
自動的に、オブジェクトにプロパティが生成され、値が代入される。
Object.keys()関数
引数で指定したオブジェクトのプロパティを全て取得して、配列で戻す。（必ずしも正確な表現ではないが、今はこれで良い）。
Object.keys()関数の利用方法
const keys = Object.keys ( [オブジェクト] ) ;
オブジェクトへ関数を動的に追加する方法
オブジェクト.[関数名] = function ( [引数]... ) { プログラム
return [戻り値] ;
}
