JavaScriptでのオブジェクト定義(クラス宣言)について紹介します。
概要
JavaScriptではクラスのようなオブジェクト内にプロパティやメソッドを持つ構造を実装する場合、オブジェクトを利用します。
JavaScriptではオブジェクトは関数が返すオブジェクト型にメンバを追加する書式で実装します。関数内にメンバ変数やメソッドを定義する書式になります。
補足
ECMAScript6に対応しているWebブラウザであれば、class構文を利用できます。class構文の詳細については
こちらの記事を参照してください。
書式
下記の書式となります。
function [オブジェクト名]() {
...
(プロパティやメソッドの実装)
...
(コンストラクタの実装)
}
プロパティの宣言
プロパティの宣言の書式は下記になります。
this.(プロパティ名) = (値);
メソッドの実装
メソッドの書式は下記になります。
this.(メソッド名) = function(){
};
または
this.(メソッド名) = (関数名);
function (関数名) (){
...実装
}
書式例
オブジェクトの宣言部
function product() {
this.name = "LemonCandy";
this.price = 150;
this.getInfo = function(){
return this.name + " = \\" + this.price;
}
}
インスタンスの作成
prod = new product();
書式（簡易型）
ブラウザによっては下記の簡易型のオブジェクト定義の書式も利用できます。簡易型の書式を利用した場合は、new によりインスタンスを作成せずにオブジェクト名として記述した変数がインスタンスになります。
var [オブジェクト名] = {
...
(プロパティやメソッドの実装)
...
}
プロパティの宣言
プロパティの宣言の書式は下記になります。
(プロパティ名: (値)
複数の項目を記述する場合は","で区切ります。
(プロパティ名1: (値1),
(プロパティ名1: (値2),
(プロパティ名1: (値3),
(プロパティ名1: (値4),
(プロパティ名1: (値5)
メソッドの実装
メソッドの書式は下記になります。
(メソッド名): function () {
...
(実装)
...
}
複数の項目を記述する場合は","で区切ります。
(メソッド名1): function () {
...
(実装)
...
},
(メソッド名2): function () {
...
(実装)
...
},
(メソッド名3): function () {
...
(実装)
...
}
書式例
var obj = {
name: "LemonCandy",
price: 150,
getInfo: function () {
return this.name + " = \\" + this.price;
}
}
プログラム例1
例:A
<!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;
}
window.onload = function onLoad() {
target = document.getElementById("output");
prod = new product();
target.innerHTML = prod.name + " = \\" + prod.price;
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
例:B
簡易型のオブジェクト定義の書式の場合。
<!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
}
window.onload = function onLoad() {
target = document.getElementById("output");
target.innerHTML = obj.name + " = \\" + obj.price;
}
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
実行結果
上記の例:A,例:B どちらの場合も実行結果は同じになります。
上記のHTMLファイルをWebブラウザで表示すると、"LemonCandy = \150" が画面に表示されます。
プログラム例2
コード例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
/* オブジェクトの作成 */
var prod;
function product() {
this.name = "none";
this.price = 0;
this.elem = document.getElementById("output");
this.elem.innerHTML = "初期状態";
this.setValue = function (new_name, new_price) {
this.name = new_name;
this.price = new_price;
}
this.outValue = function () {
this.elem.innerHTML = this.name + " = \\" + this.price;
}
}
function onLoad() {
prod = new product();
}
function onButtonClick() {
prod.setValue("Penguin Candy", 320);
prod.outValue();
}
</script>
</head>
<body onload="onLoad();">
<div id="output"></div>
<hr />
<input type="button" value="Exec" onclick="onButtonClick();" />
</body>
</html>
解説
下記コードにて、product オブジェクトの宣言と実装をしています。
function product() {
this.name = "none";
this.price = 0;
this.elem = document.getElementById("output");
this.elem.innerHTML = "初期状態";
this.setValue = function (new_name, new_price) {
this.name = new_name;
this.price = new_price;
}
this.outValue = function () {
this.elem.innerHTML = this.name + " = \\" + this.price;
}
}
product関数内の下記コードが初期化(クラスでいうところの、コンストラクタ)のコードになります。productオブジェクトがnewされたタイミングで下記のコードが実行されます。name, price に初期値を代入し、id="output" の値を持つタグの要素を取得し、内部のテキストに「初期状態」の文字を表示します。
this.name = "none";
this.price = 0;
this.elem = document.getElementById("output");
this.elem.innerHTML = "初期状態";
オブジェクト内の下記コードが内部関数(クラスでいうところのメソッド)になります。今回のコードでは、"setValue" と "outValue" の2つの関数を実装しています。
setValue()関数では、引数で与えられた値を内部の変数name, price(メンバ変数)に代入しています。
outValue()関数では、コンストラクタで取得したid="output" の値を持つタグの要素に対し、nameとpriceの変数の値を表示する処理を実装しています。
this.setValue = function (new_name, new_price) {
this.name = new_name;
this.price = new_price;
}
this.outValue = function () {
this.elem.innerHTML = this.name + " = \\" + this.price;
}
イベントのコードは下記になります。ページが表示された時点で、productオブジェクトのインスタンスを作成します。このタイミングでproductオブジェクトの初期化コード(コンストラクタ)が実行されます。
[Exec]ボタンがクリックされたタイミングで onButtonClick()関数が実行されます。onButtonClick関数では、setValue関数を呼び出し、productオブジェクトのインスタンスである prodオブジェクトのname, price に値を設定します。その後、outValue()関数を呼び出しproductオブジェクトのインスタンスである prodオブジェクトに設定したname, priceの値を画面に表示します。
今回のコードでは、setValue 関数で、name = "Penguin Candy", price = 320 を与えて設定しているため、outValue()関数により画面に表示される文字列は、"Penguin Candy = \320" となります。
function onLoad() {
prod = new product();
}
function onButtonClick() {
prod.setValue("Penguin Candy", 320);
prod.outValue();
}
実行結果
上記のHTMLファイルを表示します。下図の画面が表示されます。画面には「初期状態」の文字列が表示されていることからオブジェクトの作成が実行され、コンストラクタのコードが実行されたことが確認できます。
[Exec]ボタンをクリックします。画面に「Penguin Candy = \320」の文字列が表示されます。setValueで与えたnameとpriceの値が画面に表示されることで、インスタンス内のメンバ変数への代入や値の保持ができていることが確認できます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2021-10-25
作成日: 2011-06-10
