ITコラム

JavaScript

2017.12.11

JavaScript【 object 】～オブジェクト

オブジェクトは、JavaScript でとても重要な要素です。
今回は、JavaScript のオブジェクトについて紹介します。

１．Object オブジェクト

　
JavaScript のオブジェクトは、名前をキーにアクセスすることができて、連想配列やハッシュと呼ばれることもあります。

オブジェクト内の個々のデータは、プロパティといいます。
プロパティには、文字列や数値、関数なども格納することができます。

そして、関数が格納されたプロパティのことをメソッドといいます。
　

ここでいうオブジェクトとは、「 Object オブジェクト」のことです。

Object オブジェクトは、全てのオブジェクトの基本オブジェクトです。
組み込みオブジェクトやユーザ定義オブジェクトの他、オブジェクトと名前が付くものは、Object オブジェクトで定義されたプロパティやメソッドを共通して利用できます。

▲目次へ戻る

２．オブジェクトの生成

　
Object オブジェクトは、その生成のための記述方法が幾つかあります。

new 演算子やグローバル関数を使用して生成する場合は、次のように記述します。

var obj = new Object();

var obj = Object();

var obj = Object.create(Object.prototype);

var obj = Object.create({ });

オブジェクトリテラル記法（オブジェクト初期化子、または Object Initializer）を使用して生成する場合は、次のように記述します。
プロパティと値の 0 以上のペアを中括弧{ }で囲みます。

var obj = { };

var obj = {プロパティ名: 値, プロパティ名: 値, … };

プロパティには、どのようなデータ型でも格納することができます。

関数を格納するとメソッドと呼ばれるので、オブジェクトはプロパティとメソッドから構成されているといえます。

▲目次へ戻る

３．プロパティの定義

　
オブジェクトのプロパティは、次のように記述して定義します。

// ドット表記法
var str = object.プロパティ名;
object.プロパティ名 = str;

// ブラケット表記法
var str = object[プロパティ名];
object[プロパティ名] = str;

プロパティに値を代入することで、プロパティを定義することができます。

var obj = { };
obj.id = 001;
obj.[“name”] = “aoyama”;

上記の変数 obj を出力すると、「 {id: 001, name: “aoyama”} 」と出力されます。
　

ドット表記法の場合、プロパティ名は JavaScript 識別子とみなされるため、以下のJavaScript の命名規則に従ってプロパティ名を付ける必要があります。

JavaScript の命名規則

●英数字（アンダースコア（ _ ）及びドル記号（ $ ）も含む）の連続文字を使用する
●先頭文字に数字は使えない

ブラケット表記法の場合、プロパティ名は文字列として指定するため、有効な識別子である必要はなく、自由にプロパティ名を付けることができます。

// ×
obj.123

// ○
obj.$123

// ○
obj._123

// ○
obj[“123”]

// ○
obj[“!?”]

// ○（空白文字でもOK ）
obj[” “]

メソッド（関数が格納されたプロパティ）の呼び出しには、通常ドット表記法を使います。

var obj = {alertErr: function(){alert(“Error!”)}};

obj.alertErr();

ですが、Object が全てのオブジェクトの基本オブジェクトということを考えると、ブラケット表記法も使えることがわかります。
メソッドも、プロパティであることに変わりはないからです。

var obj = {alertErr: function(){alert(“Error!”)}};

//alertErr 関数が実行される
obj[“alertErr”]();

//alertErr 関数を表す
obj[“alertErr”];

▲目次へ戻る

４．オブジェクト型の判定

　
インスタンスのオブジェクト型を判定する方法には、constructor プロパティを使用する方法と instanceof 演算子を使用する方法があります。

var obj = { };

//判定：true
obj.constructor == Object

//判定：true
obj instanceof Object
　

var ary = [ ];

//判定：true
ary.constructor == Array

//判定：true
ary instanceof Array

constructor プロパティは、帰り値としてインスタンスの生成に使用されたコンストラクタ（ Function オブジェクト）を返します。
オブジェクト名を返してるわけではないので、「 ary.constructor == “Array” 」のように文字列として判定しないように注意します。

また、他のコンストラクタのプロトタイプは constructor プロパティを上書きしているため、プロパティを削除すると Object のコンストラクタが返されることがわかります。

delete Array.prototype.constructor

//判定：false
ary.constructor == Array

// function Object() { [native code] }
ary.constructor

▲目次へ戻る

５．プロパティの存否を判定

　
オブジェクトが指定されたプロパティを持っているかどうかを判定するには、in 演算子か hasOwnProperty メソッドを使用します。

この2つには、オブジェクトのプロトタイプチェーンをたどってチェックするかどうかの違いがあります。
hasOwnProperty メソッドは、オブジェクトの直接のプロパティのみをチェックします。
in 演算子は、プロトタイプチェーンを通じて継承されたプロパティまでチェックします。

var obj = {a: “apple”, b: 200, c: “Aomori”};

//判定：true
“a” in obj;

//判定：true
“toString” in obj

//判定：true
obj.hasOwnProperty(“a”);

//判定：false
obj.hasOwnProperty(“toString”);

undefined が設定されているプロパティについてもプロパティが存在する限り true が返りますが、delete 演算子で削除されると false が返ります。

var obj = {a: “apple”, b: 200, c: undefined};

//判定：true
obj.c == undefined;

//判定：true
‘c’ in obj;

//判定：true
obj.hasOwnProperty(“c”);

//delete演算子で削除
delete obj.c;

//判定：true
obj.c == undefined;

//判定：false
“c” in obj;

//判定：false
obj.hasOwnProperty(“c”);