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!")}
オブジェクト型を判定する
インスタンスのオブジェクト型を判定する方法として、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"}
undefined
やnull
を代入しても削除されません。
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