Object是在javascript中一個被我們常用的類型，而且JS中的所有物件都是繼承自Object物件的。雖然我們平常只是簡單地使用了Object物件來儲存數據，並沒有使用到太多其他功能，但是Object物件其實包含了很多很有用的屬性和方法，尤其是ES5增加的方法，因此，本文將從最基本的介紹開始，詳細說明了Object的常用方法和應用。
基礎介紹
建立物件
#首先我們都知道，物件就是一組相似資料和功能的集合，我們就是用它來模擬我們現實世界中的物件的。那在Javascript中，創建物件的方式通常有兩種方式：建構子和物件字面量。
new建構子法
var person = new Object();
person.name = "狼狼的蓝胖子";
person.age = 25;
登入後複製
這種方式使用new關鍵字，接著跟上Object建構函數，再來給物件實例動態新增上不同的屬性。這種方式相對來說比較繁瑣，一般建議使用物件字面量來建立物件。
物件字面量
物件字面量很好理解，使用key/value的形式直接建立對象，簡潔方便。
var person = {
name: “狼狼的蓝胖子”,
age: 25
};登入後複製
這種方式直接透過花括號將物件的屬性包起來，使用key/value的方式建立物件屬性，每個屬性之間用逗號隔開。
注意：如果是最後一個屬性，後面就不要加逗號，因為在一些舊的瀏覽器下會報錯。
物件實例的屬性和方法
不管透過哪種方式建立了物件實例後，該實例都會擁有下面的屬性和方法，下面將會一一說明。
constructor屬性
constructor屬性是保存目前物件的建構函數，前面的例子中，constructor保存的就是Object方法。
var obj1 = new Object();
obj1.id = "obj1";
var obj2 = {
"id": "obj2"
};
console.log(obj1.constructor);//function Object(){}
console.log(obj2.constructor);//function Object(){}登入後複製
hasOwnProperty(propertyName)方法
#hasOwnProperty方法接收字串參數，該參數表示屬性名稱，用來判斷該屬性是否在目前物件實例中，而不是在物件的原型鏈中。讓我們來看看下面這個例子：
var arr = [];
console.log(arr.hasOwnProperty("length"));//true
console.log(arr.hasOwnProperty("hasOwnProperty"));//false登入後複製
在這個例子中，首先透過定義了一個陣列物件的實例arr，我們知道陣列物件實際上是透過原型鏈繼承了Object對象，然後擁有自己的一些屬性，我們透過hasOwnProperty方法判斷length是arr自己的屬性，而hasOwnProperty在原型鏈上是的屬性。
hasOwnProperty方法可以和for..in結合起來取得物件自己的key。
isPrototypeOf(Object)方法
isPrototype方法接收一個對象，用來判斷目前物件是否在傳入的參數物件的原型鏈上，說起來有點抽象，我們來看看程式碼。
function MyObject() {}
var obj = new MyObject();
console.log(Object.prototype.isPrototypeOf(obj));登入後複製
我們知道MyObject是繼承自Object物件的，而在JS中，繼承是透過prototype來實現的，所以Object的prototype必定在MyObject物件實例的原型鏈上。
propertyIsEnumerable(prototypeName)方法
prototypeIsEnumerable用來判斷給定的屬性是否可以被for..in語句給枚舉出來。看下面程式碼：
var obj = {
name: "objName"
}
for (var i in obj) {
console.log(i);
}登入後複製
執行這段程式碼輸出字串“name”，這就說明透過for…in語句可以得到obj的name這個屬性，但是我們知道，obj的屬性還有很多，例如constructor，例如hasOwnPrototype等等，但它們沒有被輸出，表示這些屬性不能被for…in給枚舉出來，可以透過propertyIsEnumerable方法來得到。
console.log(obj.propertyIsEnumerable("constructor"));//false登入後複製
判斷「constructor」是否可以被列舉，輸出false說明無法被列舉出來。
toLocaleString()方法
toLocalString方法傳回物件的字串表示，和程式碼的執行環境有關。
var obj = {};
console.log(obj.toLocaleString());//[object Object]
var date = new Date();
console.log(date.toLocaleString());//2016/2/28 下午1:39:27登入後複製
toString()方法
toString用來傳回物件的字串表示。
var obj = {};
console.log(obj.toString());//[object Object]
var date = new Date();
console.log(date.toString());//Sun Feb 28 2016 13:40:36 GMT+0800 (中国标准时间)登入後複製
valueOf()方法
valueOf方法傳回物件的原始值，可能是字串、數值或bool值等，看特定的物件。
var obj = {
name: "obj"
};
console.log(obj.valueOf());//Object {name: "obj"}
var arr = [1];
console.log(arr.valueOf());//[1]
var date = new Date();
console.log(date.valueOf());//1456638436303登入後複製
如程式碼所示，三個不同的物件實例呼叫valueOf傳回不同的資料。
屬性的類型
在Javascript中，屬性有兩種類型，分別是資料屬性和存取器屬性，讓我們來看看這兩種屬性具體是什麼東西。
資料屬性
資料屬性我們可以理解為我們平時定義物件時賦予的屬性，它可以進行讀取和寫入。但是，ES5中定義了一些特性，這些特性是用來描述屬性的各種特徵，特性是內部值，不能直接存取。特性以兩對方括號表示，例如[[Enumerable]]。屬性的特性會有一些預設值，要修改特性的預設值，就必須使用ES5定義的新方法Object.defineProperty方法來修改。
資料屬性有4個描述其特徵的特性，以下將依序說明每一個特性：
（1）[[Configurable]]：此特性表示是否可以透過delete運算子來刪除屬性，預設值是true。
var obj = {};
obj.name = "myname";
delete obj.name;
console.log(obj.name);//undefined登入後複製
這段程式碼很明顯，透過delete刪除了obj的name屬性後，我們再存取name屬性就存取不到了。
我们通过Object.defineProperty方法来修改[[Configurable]]特性。
var obj = {};
obj.name = "myname";
Object.defineProperty(obj, "name", {
configurable: false
})
delete obj.name;
console.log(obj.name);//myname登入後複製
通过将configurable特性设置成false之后，delete就无法删除name属性了，如果在严格模式下，使用delete去删除就会报错。
（2）[[Enumerable]]：表示是否能够通过for…in语句来枚举出属性，默认是true
我们来看看前面的例子：
var obj = {
name: "objName"
}
for (var i in obj) {
console.log(i);//name
}登入後複製
这段代码只输出了name属性，我们来将constructor属性的[[Enumerable]]设置为true试试。
var obj = {
name: "objName"
}
Object.defineProperty(obj, "constructor", {
enumerable: true
})
for (var i in obj) {
console.log(i);//name,constructor
}
console.log(obj.propertyIsEnumerable("constructor"));//true登入後複製
这段代码中，for…in循环得到了name和constructor两个属性，而通过propertyIsEnumerable方法来判断constructor也返回了true。
（3）[[Writable]]：表示属性值是否可以修改，默认为true
如果[[Writable]]被设置成false，尝试修改时将没有效果，在严格模式下会报错
（4）[[Value]]：表示属性的值，默认为undefined
我们通过一个简单的例子来看看这两个特性：
var obj = {
name: "name"
};
console.log(obj.name);//name
Object.defineProperty(obj, "name", {
value: "newValue",
writable: false
})
console.log(obj.name);//newValue
obj.name = "oldValue";
console.log(obj.name);//newValue登入後複製
我们首先定义了obj对象的name属性值为“name”，然后通过defineProperty方法来修改值，并且将其设置为不可修改的。接着我们再修改name属性的值，可以发现修改无效。
如果我们通过defineProperty来修改name属性的值，是否可以修改呢？答案是可以的：
Object.defineProperty(obj, "name", {
value: "oldValue"
})
console.log(obj.name); //oldValue登入後複製
访问器属性
访问器属性有点类似于C#中的属性，和数据属性的区别在于，它没有数据属性的[[Writable]]和[[Value]]两个特性，而是拥有一对getter和setter函数。
[[Get]]：读取属性时调用的函数，默认是undefined
[[Set]]：设置属性时调用的函数，默认是undefined
getter和setter是一个很有用的东西，假设有两个属性，其中第二个属性值会随着第一个属性值的变化而变化。这种场景在我们平时的编码中起始是非常常见的。在之前的做法中，我们往往要去手动修改第二个属性的值，那现在我们就可以通过get和set函数来解决这个问题。看下面这个例子：
var person = {
age: 10
}
Object.defineProperty(person, "type", {
get: function () {
if (person.age > 17) {
return "成人";
}
return "小孩";
}
})
console.log(person.type);//小孩
person.age = 18;
console.log(person.type);//成人登入後複製
通过修改age的值，type的值也会相应的修改，这样我们就不用再手动的去修改type的值了。
下面这种方式也是可以实现同样的效果：
var person = {
_age: 10,
type: "小孩"
}
Object.defineProperty(person, "age", {
get: function () {
return this._age;
},
set: function (newValue) {
this._age = newValue;
this.type = newValue > 17 ? "成人" : "小孩";
}
})
console.log(person.type);
person.age = 18;
console.log(person.type);登入後複製
关于访问器属性，有几点要注意：
1、严格模式下，必须同时设置get和set
2、非严格模式下，可以只设置其中一个，如果只设置get，则属性是只读的，如果只设置set，属性则无法读取
3、Object.defineProperty是ES5中的新方法，IE9（IE8部分实现，只有dom对象才支持）以下浏览器不支持，一些旧的浏览器可以通过非标准方法defineGetter()和defineSetter()来设置，这里就不说明了，有兴趣的同学可以查找相关资料。
特性操作的相关方法
ES5提供了一些读取或操作属性特性的方法，前面用到的Object.defineProperty就是其中之一。我总结了一些比较常用的方法如下：
（1）Object.defineProperty
定义一个对象的属性，这个方法前面我们已经用到多次，简单说说其用法。
Object.defineProperty(obj,propName,descriptor);
登入後複製
defineProperty有点类似于定于在Object上的静态方法，通过Object直接调用，它接收3个参数：
obj：需要定义属性的对象
propNane：需要被定义的属性名称
defineProperty：属性描述符，包含一些属性的特性定义
例子如下：
var obj = {};
Object.defineProperty(obj, "name", {
value: "name",
configurable: true,
writable: true,
enumerable: true
});登入後複製
（2）Object.defineProperties
和defineProperty类似，是用来定义对象属性的，不同的是它可以用来同时定义多个属性，我们通过命名也可以看出来，用法如下：
var obj = {};
Object.defineProperty(obj, {
"name": {
value: "name",
configurable: true,
writable: true,
enumerable: true
},
"age": {
value: 20
}
});登入後複製
（3）Object.getOwnPropertyDescriptor
ES5中还提供了一个读取特性值的方法，该方法接收对象及其属性名作为两个参数，返回一个对象，根据属性类型的不同，返回对象会包含不同的值。
var person = {
_age: 10,
type: "小孩"
}
Object.defineProperty(person, "age", {
get: function () {
return this._age;
},
set: function (newValue) {
this._age = newValue;
this.type = newValue > 17 ? "成人" : "小孩";
}
})
console.log(Object.getOwnPropertyDescriptor(person, "type"));//Object {value: "成人", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(person, "age")); //Object {enumerable: false, configurable: false, get: function(),set: function ()}登入後複製
Object的方法
在ES5中，Object对象上新增了一批方法，这些方法可以直接通过Object进行访问，前面用到的defineProperty就是新增的方法之一。除此之外还有很多方法，我将其总结归纳如下：
对象创建型方法
Object.create(proto, [propertiesObject])
在前面我们提到，创建一个对象有两种方法：构造函数和对象字面量。
这两种方法有一个缺点就是：如果要创建多个对象，写起来很繁琐，所以后来就有了一种创建自定义构造函数的方法来创建对象，如下所示：
function Person(name, age) {
this.name = name;
this.age = age;
}
var person = new Person("Jack", 15);登入後複製
这种方式可以很方便的创建多个同样的对象，也是目前比较常用的方法。
ES5提供的Object.create方法也是一个创建对象的方法，这个方法允许为创建的对象选择原型对象，不需要定义一个构造函数。用法如下：
var obj = Object.create(Object.prototype, {
name: {
value: "Jack"
}
})
console.log(obj.name);//Jack登入後複製
这个方法接收的第一个参数作为被创建对象的原型，第二个参数是对象的属性。注意：在这个例子中，name属性是无法被修改的，因为它没有设置writable特性，默认则为false。
个人看法：Object.create这种创建对象的方式略显繁琐，除非是需要修改属性的特性，否则不建议使用这种方式创建对象。
属性获取型方法
Object.keys
Object.keys是用来获取给定对象的所有可枚举的自身属性的属性名，它返回一个数组。
function Parent() {
this.lastName = "Black"
}
function Child(firstName) {
this.firstName = firstName;
}
Child.prototype = new Parent();
var son = new Child("Jack");
console.log(Object.keys(son));//["firstName"]登入後複製
代码中返回了firstName，并没有返回从prototype继承而来的lastName和不可枚举的相关属性。
在一些旧的浏览器中，我们可以使用hasOwnProperty和for…in来达到类似的效果。
Object.keys = Object.keys ||
function (obj) {
var keys = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
}登入後複製
Object.getOwnPropertyNames()
getOwnPropertyNames用来获取对象自身的所有属性，包括可枚举和不可枚举的所有属性，如下所示：
function Parent() {
this.lastName = "Black"
}
function Child(firstName) {
this.firstName = firstName;
}
Child.prototype = new Parent();
var son = new Child("Jack");
Object.defineProperty(son, "age", {
enumerable: false
})
console.log(Object.keys(son));//["firstName"]
console.log(Object.getOwnPropertyNames(son));//["firstName", "age"]登入後複製
我们定义给son对象定义了一个不可枚举的属性age，然后通过keys和getOwnPropertyNames两个方法来获取属性列表，能明显看出了两者区别。
属性特性型方法
这个主要是前面提到的三个方法：defineProperty，defineProperties和getOwnPropertyDescriptor三个方法
对象限制型方法
ES5中提供了一系列限制对象被修改的方法，用来防止被某些对象被无意间修改导致的错误。每种限制类型包含一个判断方法和一个设置方法。
阻止对象扩展
Object.preventExtensions()用来限制对象的扩展，设置之后，对象将无法添加新属性，用法如下：
Object.preventExtensions(obj);
登入後複製
该方法接收一个要被设置成无法扩展的对象作为参数，需要注意两点：
1、对象的属性不可用扩展，但是已存在的属性可以被删除
2、无法添加新属性指的是无法在自身上添加属性，如果是在对象的原型上，还是可以添加属性的。
function Person(name) {
this.name = name;
}
var person = new Person("Jack");
Object.preventExtensions(person);
delete person.name;
console.log(person.name);//undefined
Person.prototype.age = 15;
console.log(person.age);//15登入後複製
Object.isExtensible方法用来判断一个对象是否可扩展，默认情况是true
将对象密封
Object.seal可以密封一个对象并返回被密封的对象。
密封对象无法添加或删除已有属性，也无法修改属性的enumerable，writable，configurable，但是可以修改属性值。
function Person(name) {
this.name = name;
}
var person = new Person("Jack");
Object.seal(person);
delete person.name;
console.log(person.name);//Jack登入後複製
将对象密封后，使用delete删除对象属性，还是可以访问得到属性。
通过Object.isSealed可以用来判断一个对象是否被密封了。
冻结对象
Object.freeze方法用来冻结一个对象，被冻结的对象将无法添加，修改，删除属性值，也无法修改属性的特性值，即这个对象无法被修改。
function Person(name) {
this.name = name;
}
var person = new Person("Jack");
Object.freeze(person);
delete person.name;
console.log(person.name);//Jack
Person.prototype.age = 15;
console.log(person.age);//15登入後複製
分析上面的代码我们可以发现，被冻结的对象无法删除自身的属性，但是通过其原型对象还是可以新增属性的。
通过Object.isFrozen可以用来判断一个对象是否被冻结了。
可以发现：这三个限制对象的方法的限制程度是依次上升的。
总结
Object虽说是一个我们平时开发中最经常用到的对象，但是它的很多功能还没有被我们挖掘出来。本文首先介绍了Object的基本使用，接着介绍了一些比较少使用到的属性特性，最后分析了一些比较常用的方法，尤其是ES5中提供的新方法。欢迎大家交流！！
以上是詳解JavaScript中的Object物件 的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
