ドット演算子を使ったプロパティへの値の代入と参照

広告

オブジェクトは複数の値を管理でき、その一つ一つはプロパティと呼ばれます。プロパティは通常の変数と同じように値を格納するための入れ物であり、直接値を代入したり取得したりすることが可能です。

前のページで確認したとおりオブジェクトリテラルを変数に代入するには次のように記述しました。 

var 変数名 = {プロパティ名1:値1, プロパティ名2:値2, ...};

この時、オブジェクトリテラルへの参照が変数に代入されます。そしてオブジェクの各プロパティは次のように表すことができます。 

変数名.プロパティ名

オブジェクトの参照が代入された変数に対してドット演算子を使うことでプロパティを表すことができます。ドット演算子の右側にはプロパティ名を指定して下さい。

例えば次のようなオブジェクトがあった場合で考えてみます。 

var obj = {width:100, height:80};

このオブジェクトには2つのプロパティが含まれています。プロパティの1つはプロパティ名が「width」、もう1つのプロパティはプロパティ名が「height」となっています。よってプロパティはそれぞれobj.width、obj.heightと表すことができます。

プロパティ1つ1つは変数と同じように扱うことができますので、プロパティに代入されている値を出力したり、他の変数に代入することができます。 

var obj = {width:100, height:80};

alert(obj.width);
var num = obj.height;
プロパティに値を代入

オブジェクトのプロパティは値を参照するだけではなく別の値を代入することができます。オブジェクトのプロパティに値を代入するには次の書式を使います。 

変数名.プロパティ名 = 値;

オブジェクトの各プロパティ1つ1つは変数と同じように扱うことができますので、「=」演算子を使って値を代入することができます。次の例を見てください。 

var obj = {width:100, height:80};

obj.width = 120;

プロパティ名「width」のプロパティには「100」という数値が格納されていましたが、代わりに「120」という数値を代入しています。

ドット演算子を使った場合のプロパティ名の指定について

ドット演算子を使うことでオブジェクトに含まれるプロパティを表すことができます。 

変数名.プロパティ名

ただ注意すべて点があり、ドット演算子の右側のプロパティ名には識別子しか記述することができません。オブジェクトリテラルを記述する時にプロパティ名として識別子を使った場合には問題はありませんが、プロパティ名として文字列を使用した場合にはドット演算子を使ったプロパティへのアクセスが出来ない場合があります。

例えば下記のようにオブジェクトリテラルでプロパティ名として識別子を使って指定していれば、ドット演算子の右側にプロパティ名を記述する場合も当然識別子となるため問題ありません。 

var obj = {width:100, height:80};

alert(obj.width);

プロパティ名として文字列を使って指定した場合でも、その文字列が識別子と同じ規則で記述されていれば大丈夫です。 

var obj = {'width':100, 'height':80};

alert(obj.width);

文字列を使った場合で、その文字列が識別子の規則では認められない形式だった場合には、ドット演算子を使ってプロパティへアクセスすることはできません。下記のような使い方をするとエラーとなります。(識別子では先頭文字に数値を使えないため)。 

var obj = {'1st':100, 'Top border':80};

alert(obj.1st);

なおプロパティ名として文字列を使った場合にプロパティに対してアクセスするには連想配列の形式を使うことで可能です。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script3_1.js">
</script>

</body>
</html>

var obj = {width:100, height:80};

document.write("<p>");

document.write("width = " + obj.width + ", height = " + obj.height);

document.write("</p>");

obj.width = 150;
obj.height = obj.width * 0.8;

document.write("<p>");

document.write("width = " + obj.width + ", height = " + obj.height);

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

( Written by Tatsuo Ikura )