ES5入門 - Object編

ES5入門 - Object編

本エントリーは「to-R JavaScript Advent Calendar 2015」12日目のエントリー、ES5のObjectについて解説します。

ES5入門、1回目がArray編、2回目がJSON編、3回目がObject.create()編で今回がObject.create()以外のObjectの解説です。

ES5で追加されたObject.create()以外のObjectの機能は以下のメソッドです。

Object.keys

Object.keys()は引数で与えられたオブジェクトのキーを配列で返すためのメソッドです。

var myObj = {
	"XXX":"aaa",
	"YYY":"bbb",
	"ZZZ":"ccc"
}
var result = Object.keys(myObj);
console.log(result); // ["XXX", "YYY", "ZZZ"]

Object.defineProperty

Object.defineProperty()はプロパティの生成時に値(value)、列挙可能(enumerable)、削除可能(configurable)、変更可能(writable)を指定するためのメソッドです。これらの値を明示的に指定しなければ削除・変更・列挙が不可能なプロパティが生成されます。

var myObj = {};
Object.defineProperty(myObj,"prop1",{
	value : "XXX",
	enumerable:false,
	configurable:false,
	writable:false
});
Object.defineProperty(myObj,"prop2",{
	value : "YYY",
	enumerable:true,
	configurable:true,
	writable:true
});
  
//enumerableがtrueのYYYのみ出力される
for(var key in myObj){
	console.log(myObj[key]);// YYY
}
 
//configurableがfalseのprop1は削除されない
delete myObj.prop1;
console.log(myObj.prop1);// XXX
 
// writable:false のため書き換えできない。
myObj.prop1 = "ZZZ"; 
console.log(myObj.prop1);// XXX

Object.defineProperties

Object.definePropertiesは複数のプロパティを一括で生成するためのメソッドです。

var myObj = {};
Object.defineProperties(myObj,{
	"prop1":{
		value : "XXX",
		enumerable:false,
		configurable:false,
		writable:false
	},
	"prop2":{
		value : "YYY",
		enumerable:true,
		configurable:true,
		writable:true
	}
});

Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptorはObject.definePropertyやObject.definePropertiesで指定した属性、つまり値(value)、列挙可能(enumerable)、削除可能(configurable)、変更可能(writable)に何が指定されているか調べるためのメソッドです。

var myObj = {};
Object.defineProperties(myObj,{
	"prop1":{
		value : "XXX",
		enumerable:false,
		configurable:false,
		writable:false
	},
	"prop2":{
		value : "YYY",
		enumerable:true,
		configurable:true,
		writable:true
	}
});
var result1 = Object.getOwnPropertyDescriptor(myObj,"prop1");
console.log(result1); // Object {value: "XXX", writable: false, enumerable: false, configurable: false}
var result2 = Object.getOwnPropertyDescriptor(myObj,"prop2");
console.log(result2); // Object {value: "YYY", writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyNames

Object.getOwnPropertyNamesはenumerableがtrue/falseに関わらず、すべてのオブジェクトのkey配列を出力するメソッドです。

var myArray = ["XXX","YYY","ZZZ"];
Object.getOwnPropertyNames(myArray); // ["0", "1", "2", "length"]
var myObj = {};
Object.defineProperties(myObj,{
	"prop1":{
		value : "XXX",
		enumerable:false,
		configurable:false,
		writable:false
	},
	"prop2":{
		value : "YYY",
		enumerable:true,
		configurable:true,
		writable:true
	}
});
Object.getOwnPropertyNames(myObj); // ["prop1", "prop2"]

Object.preventExtensions

Object.preventExtensionsはオブジェクトが拡張可能かどうかを示す拡張可能属性(extensible)をfalseに変更してオブジェクトが拡張できないようにする為のメソッドです。

拡張可能属性(extensible)がfalseに変更されたオブジェクトには新しいプロパティやメソッドを追加することができません。

var myObj = {};
myObj.prop1 = "XXXX";
console.log(myObj); // {prop1: "XXXX"}
myObj.prop2 = "YYY";
console.log(myObj); //  {prop1: "XXXX", prop2: "YYY"}
Object.preventExtensions(myObj);
myObj.prop3 = "ZZZ";
console.log(myObj); //  {prop1: "XXXX", prop2: "YYY"}

Object.isExtensible

Object.isExtensibleはオブジェクトが拡張可能かを調べるためのメソッドです。

var myObj = {};
console.log(Object.isExtensible(myObj)); // true
Object.preventExtensions(myObj);
console.log(Object.isExtensible(myObj));// false

Object.seal

Object.sealはオブジェクトの拡張可能属性(extensible)をfalseに変更してオブジェクトが拡張できないように変更し、各プロパティの削除可能属性(configurable)をfalseに変更して削除できないようにするためのメソッドです。

var myObj = {prop1:"XXX"};
Object.seal(myObj);
console.log(Object.isExtensible(myObj)); // false
console.log(Object.getOwnPropertyDescriptor(myObj,"prop1")["configurable"]); // false

Object.isSealed

Object.isSealedはObject.sealが適用されているか調べるためのメソッドです。

var myObj = {prop1:"XXX"};
console.log(Object.isSealed(myObj)); // false
Object.seal(myObj);
console.log(Object.isSealed(myObj)); // ture

Object.freeze

Object.freezeはオブジェクトの拡張可能属性(extensible)をfalseに変更してオブジェクトが拡張できないように変更し、各プロパティの削除可能属性(configurable)とを変更可能(writable)をfalseに変更して削除・更新ができないようにするためのメソッドです。

var myObj = {prop1:"XXX"};
Object.freeze(myObj);
console.log(Object.isExtensible(myObj)); // false
console.log(Object.getOwnPropertyDescriptor(myObj,"prop1")["configurable"]); // false
console.log(Object.getOwnPropertyDescriptor(myObj,"prop1")["writable"]); // false

Object.isFrozen

Object.isFrozenはObject.freezeが適用されているか調べるためのメソッドです。

var myObj = {prop1:"XXX"};
Object.freeze(myObj);
console.log(Object.isFrozen(myObj)); // true

Object.getPrototypeOf

Object.getPrototypeOfはインスタンス化されたオブジェクからコンストラクタ関数で指定されたprototypeオブジェクトを取得するためのメソッドです。

下記のサンプルではmyClassから取得したmyClass2がMyClass.prototypeと同じオブジェクトであることが証明できます。

var MyClass = function(){};
MyClass.prototype.foo = function(){
	console.log("foo");
}
var myClass = new MyClass();
myClass2 = Object.getPrototypeOf(myClass);
console.log(MyClass.prototype === myClass2); // true

ES5で追加されたObject.create()以外のObjectの機能紹介は以上です。

スポンサードリンク

«ES5入門 - Object.create()編 | メイン | jQuery samples - スクロールすると表示されるトップへ戻るボタン»