読者です 読者をやめる 読者になる 読者になる

【JavaScript】Objectオブジェクトの基本について

スポンサーリンク

JavaScript のオブジェクトについての基本です。

オブジェクトとは

JavaScript のオブジェクトは名前をキーにアクセスすることができ、連想配列やハッシュと呼ばれることがあります。 オブジェクト内の個々のデータをプロパティと呼び、プロパティには文字列や数値、関数なども格納することができます。そして、関数が格納されたプロパティのことをメソッドと呼びます。

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

 オブジェクトを利用する - JavaScript | MDN

オブジェクト - Objectの生成

オブジェクトリテラル記法(オブジェクト初期化子、または Object Initializer)を使用した生成は以下の通りです。プロパティと値の 0 以上のペアを中括弧{}で囲みます。

var obj = {};  // 空のオブジェクト
var obj = {propertyName: value, propertyName: value, ... };

その他に new 演算子やグローバル関数を使用した以下のような生成方法もあります。

var obj = new Object();
var obj = Object();
var obj = Object.create(Object.prototype);
var obj = Object.create({});

上記のように Object オブジェクトを直接インスタンス化することによって作成されるオブジェクトのことを、匿名オブジェクト無名オブジェクトと呼びます。

プロパティにはどのようなデータ型でも格納可能です。関数を格納するとメソッドになるので、オブジェクトはプロパティとメソッドから構成されているといえます。

var obj = {a: "hoge", b: 100, c: [], d: function(){console.log("Hello World!")}};

 Object initializer - JavaScript | MDN

プロパティのアクセス

オブジェクトのプロパティにアクセスするには、ドット表記法とブラケット表記法を使用します。

// ドット表記法
var v = object.property_name;
object.property_name = v;
// ブラケット表記法
var v = object[property_name];
object[property_name] = v;

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

var obj = {};
obj.id = 12345;
obj.['name'] = 'yamamoto';
console.log(obj);  // Object {id: 12345, name: "yamamoto"}

ドット表記法の場合、プロパティ名は JavaScript 識別子とみなされるので、命名規則に則っていない名前は使えません。即ち、数字で始まってはいけない、アンダースコア_及びドル記号$を含む英数字の連続でなければなりません。

ブラケット表記法の場合、プロパティ名は文字列として指定するので、有効な識別子である必要はありません。数字で始まっていようがドル記号以外の記号が使われていようが、いかなる値を持つことも出来ます。

obj.123  // NG
obj.$123  // OK
obj._123  // OK
obj['123']  // OK
obj['!?']  // OK
obj[' ']  // 空白文字でもOK

また、関数が格納されたプロパティのことをメソッドといいますが、メソッドの呼び出しには通常ドット表記法を使います。これは他の言語でも同じなので違和感はないですね。

var obj = {hello: function(){console.log("Hello World!")}};
obj.hello();  // Hello World!

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

obj["hello"]();  // Hello World!
obj["hello"];  // function(){console.log("Hello World!")}

 メンバー演算子 - JavaScript | MDN

オブジェクト型を判定する

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

var obj = {};
obj.constructor == Object  // true
obj instanceof Object  // true
var ary = [];
ary.constructor == Array  // true
ary instanceof Array  // true

constructorプロパティは戻り値としてインスタンスの生成に使用されたコンストラクタ(Functionオブジェクト)を返します。オブジェクト名を返してるわけではないので、ary.constructor == 'Array'のように文字列として判定してはいけません。また、他のコンストラクタのプロトタイプはconstructorプロパティを上書きしているため、プロパティを削除すると Object のコンストラクタが返されることがわかります。

delete Array.prototype.constructor
ary.constructor == Array  // false
ary.constructor  // function Object() { [native code] }

プロパティが存在するか判定する

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

var obj = {a: "hoge", b: 100, c: "fuga"};
'a' in obj;  // true
'toString' in obj  // true
obj.hasOwnProperty('a');  // true
obj.hasOwnProperty('toString');  // false

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

var obj = {a: "hoge", b: 100, c: undefined};
obj.c == undefined;  // true
'c' in obj;  // true
obj.hasOwnProperty('c');  // true

delete obj.c;  // delete演算子で削除
obj.c == undefined;  // true
'c' in obj;  // false
obj.hasOwnProperty('c');  // false

 in - JavaScript | MDN
 Object.prototype.hasOwnProperty() - JavaScript | MDN

プロパティを削除する

オブジェクトのプロパティはdelete演算子で削除できます。

var obj = {a: "hoge", b: 100, c: "fuga"};
delete obj.b;  // true
console.log(obj);  // Object {a: "hoge", c: "fuga"}

undefinednullを代入しても削除されません。

obj.a = undefined;
obj.c = null;
console.log(obj);  // Object {a: undefined, c: null}

varを使わずに宣言した変数は全てグローバル変数、すなわちグローバルオブジェクトのプロパティなのでdeleteで削除することが可能です。varを使用したローカル変数はプロパティではないので削除できません。

gb = 'Global Var';
delete gb;  // true
var lc = 'Local Var';
delete lc;  // false

 delete - JavaScript | MDN