@ JavaScript

object:オブジェクト

オブジェクトとは、状態(プロパティ)と機能(メソッド)をまとめてカプセル化したものです。

手続き型のプログラムでは行数が増えて複雑になってくると、同じようなソースコードを何度も記述することになります。そこで、何度も使うデータは変数としてまとめ、同じような機能は function としていくことになります。ところが、より複雑なプログラムであった場合、変数や function が増えすぎて管理が困難になってきます。

これを解決する方法として、オブジェクトという考え方があります。増えていく変数や function を関連したものごとに1つの集合体としてまとめて管理します。この集合体がオブジェクトになります。

オブジェクト プロパティの集合体
プロパティ 名前と値で構成されたデータを保持する入れ物、つまり変数

プロパティ

変数として扱っているものは実はすべてプロパティです。特に宣言しないで使われている変数はグローバルオブジェクトのプロパティ、function 内で宣言をして使われているものは、その function オブジェクトのプロパティです。

グローバルオブジェクトのプロパティはプログラムのどこからでも参照・更新することができます。

function オブジェクトのプロパティはその function オブジェクト内でのみ有効なプロパティです。

property.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
var a = 1;  //グローバルオブジェクトのプロパティ
b = 2;  //グローバルオブジェクトのプロパティ
function test(){
  alert(a);   //「1」を表示
  var b = 3;  //function 内でのみ有効なプロパティ
  d = 4;    //グローバルオブジェクトのプロパティ
  alert(b);  //function 内でのみ有効なプロパティの方が参照され「3」を表示
}
test();
alert(b);  //グローバルオブジェクトのプロパティが参照され「2」を表示
alert(d);  「4」を表示
</script>
</head>

<body>
</body>

</html>

メソッド

オブジェクトは何らかの動作をさせるコマンドを持っています。これをメソッドと呼びます。

JavaScript におけるメソッドは「function」が代入されたプロパティです。

つぎの2つのソースコードは同じ機能をもっています。

function method() {
  alert("aaa");
}
method();
method = function() {
  alert("aaa");
}
method();

後者のソースコードがわかりやすいでしょう。method というプロパティに function を代入しています function が代入されたプロパティは () をつけることで function を実行できます。

オブジェクトの作りかた

まずは、機能のシンプルな汎用オブジェクトの作りかたについて確認していきます。汎用オブジェクトでは最低限の機能しか持っていないオブジェクトです。

作りかたには2つの方法があります。

new を使ってオブジェクトを作る

object_new.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
myObject = new Object();
alert(typeof myObject);
</script>
</head>

<body>
</body>

</html>

{} を使ってオブジェクトを作る

object_braces.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample</title>
<script>
myObject = {};
alert(typeof myObject);
</script>
</head>

<body>
</body>

</html>

プロパティの追加

プロパティの追加方法も2通りあります。2つの方法を使って property1 と propert2 という名前でプロパティを追加してみます。

objectname.propertyname といった書式でプロパティにアクセスできます。

add_property.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
myObject = new Object();
myObject.propaty1 = "プロパティ1";
myObject["propaty2"] = "プロパティ2";
alert(myObject.propaty1);
alert(myObject.propaty2);
</script>
</head>

<body>
</body>

</html>

オブジェクトの生成と同時にプロパティを設定することもできます。

myObject = {property1:"プロパティ1", property2:"プロパティ2"};

単純なオブジェクトの作成

つぎのソースコードは、test というプロパティをもていて、その中には文字列”テスト”が入っているオブジェクトです。

example.js

var obj = new Object();
obj.test = "テスト";

この構文は次のように記述しても同じです。

example.js

var obj = {};
obj["test"] = "テスト";

また以下のように記述してもオブジェクトが生成されます。

example.js

var obj = {test:"テスト"};

配列もオブジェクト

つぎの配列は1つだけ値を持っている配列です。

example.js

var ary = new array();
ary[0] = "テスト"

つぎのように記述しても同じです。

example.js

var ary = new array();
ary["0"] = "テスト"

数字として扱われるか、文字として扱われるかは JavaScritp では問われません。

つまり配列というのは数字のプロパティを持っているオブジェクトです。

しかし以下のように、ドットシンタックスではアクセスできません。JavaScritp で変数名(プロパティ名)は数字から始まってはいけないというルールがあるからです。

example.js

var ary = new array();
ary.0 = "テスト";  //エラー

複雑なオブジェクト

少し複雑な配列とオブジェクトが入れ子になったオブジェクトを作る例を見てみましょう。

まずは1つずつ構築していく方法です。

example.js

var lang = new Object();
lang.markup = new Array();
lang.markup[0] = "HTML";
lang.markup[1] = "XHTML";
lang.style = "CSS";
lang.script = "JavaScript";

一度に生成する方法もあります。

example.js

var lang = {
  markup:["HTML", "XHTML"],
  style:"CSS",
  script:"JavaScript"
}

もちろん上記の方法を合わせてもかまいません。lang は1つずつ、配列は [] で、とすることもできます。

example.js

var lang = new Object();
lang["markup"] = ["HTML", "XHTML"];
lang["style"] = "CSS";
lang["script"] = "JavaScript";