オブジェクトのプロパティの値を取得・設定するコードを紹介します。
概要
JavaScriptではオブジェクトを定義することで、クラスのようなカプセル化を実現できます。この記事ではオブジェクトのプロパティにアクセスするコードの記述方法を紹介します。
書式
(オブジェクトのインスタンス名).(プロパティ名)
プログラム
例1
コード
下記のHTMLファイルを作成します。
<!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">
<head>
<title></title>
<script type="text/javascript" language="javascript">
function product() {
this.name = "LemonCandy";
this.price = 150;
this.getInfo = function(){
return this.name + " = \\" + this.price;
}
}
window.onload = function onLoad() {
target = document.getElementById("output");
prod = new product();
target.innerHTML = "name:" + prod.name + "<br/>";
target.innerHTML += "price:" + prod.price + "<br/>";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
function product() {
this.name = "LemonCandy";
this.price = 150;
this.getInfo = function(){
return this.name + " = \\" + this.price;
}
}
上記コードがオブジェクトの定義となります。今回の例では、name, price プロパティと getInfo()メソッドを実装しています。
window.onload = function onLoad() {
target = document.getElementById("output");
prod = new product();
prod.name = "LemonCandy2";
target.innerHTML = "name:" + prod.name + "<br/>";
target.innerHTML += "price:" + prod.price + "<br/>";
}
ページを読み込むと上記のコードが実行されます。
prod = new product();
により、オブジェクトのインスタンスを作成します。
prod.name = "LemonCandy2";
(オブジェクト名).(プロパティ名)でオブジェクトのプロパティにアクセスします。プロパティに値を設定する場合は、代入によりプロパティ値を設定します。
target.innerHTML = "name:" + prod.name + "<br/>";
target.innerHTML += "price:" + prod.price + "<br/>";
(オブジェクト名).(プロパティ名)でオブジェクトのプロパティにアクセスします。プロパティの値を読み出し画面に表示します。
実行結果
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。プロパティへの値の設定とプロパティからの値の取得ができていることが確認できます。
例2
コード
下記のHTMLファイルを作成します。
<!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">
<head>
<title></title>
<script type="text/javascript" language="javascript">
var obj = {
name: "LemonCandy",
price: 150,
getInfo: function () {
return this.name + " = \\" + this.price;
}
}
window.onload = function onLoad() {
target = document.getElementById("output");
obj.name = "LemonCandy2";
obj.price = 220;
target.innerHTML = "name:" + obj.name + "<br/>";
target.innerHTML += "price:" + obj.price + "<br/>";
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
解説
var obj = {
name: "LemonCandy",
price: 150,
getInfo: function () {
return this.name + " = \\" + this.price;
}
}
上記コードがオブジェクトの定義となります。今回の例では、name, price プロパティと getInfo()メソッドを実装しています。簡易型の書式で記述しています。
window.onload = function onLoad() {
target = document.getElementById("output");
obj.name = "LemonCandy2";
obj.price = 220;
target.innerHTML = "name:" + obj.name + "<br/>";
target.innerHTML += "price:" + obj.price + "<br/>";
}
ページを読み込むと上記のコードが実行されます。コードは例1のコードと同様で処理の内容も同様となります。簡易型のオブジェクト定義の書式を利用しているため、newコマンドによるインスタンスの作成が無い部分が例1のコードと異なります。
実行結果
上記のHTMLファイルをWebブラウザで表示すると下図の画面が表示されます。プロパティへの値の設定とプロパティからの値の取得ができていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2017-09-07
作成日: 2017-04-28
