細說JavaScript中對象的屬性和方法

最近在回家的路上讀了尼古拉斯的新書《JavaScript面向?qū)ο缶?/a>》，發(fā)現(xiàn)自己對對象的屬性和方法不是很熟悉，特別是es5新增的部分，特寫此文總結(jié)一下，同時也與大家共勉。

本文分為兩部分，分別介紹Object和Object.prototype上的一些常用方法。主要參考了MDN，每個方法都給出了MDN的鏈接。

前言

查看一個對象屬性的最好方法，不是去百度，也不是去google，而是用下面的方法（來自《DOM啟蒙》）：

Object.getOwnPropertyNames(Object).sort().forEach(function (val) {console.log(val, '\n')});

上面的代碼會有如下的輸出，我的環(huán)境是Chrome(52.0.2743.82 m)，如果你的環(huán)境不同輸出可能不一樣：

如果不支持getOwnPropertyNames的瀏覽器就用for in吧，請自行解決。

Object

從上面的輸出中挑選出一些常用方法和屬性，會得到下面的列表：

• create⑤
• defineProperty⑤
• defineProperties⑤
• getPrototypeOf⑤
• getOwnPropertyDescriptor⑤
• keys⑤
• getOwnPropertyNames⑤
• preventExtensions⑤
• isExtensible⑤
• seal⑤
• isSealed⑤
• freeze⑤
• isFrozen⑤
• assign⑥
• getOwnPropertySymbols⑥
• is⑥
• setPrototypeOf⑥

注解：⑤的為es5新增的方法，⑥的為es6(es2015)新增的方法。

下面將會一一介紹上面的方法。

create

Object.create() 方法創(chuàng)建一個擁有指定原型和若干個指定屬性的對象。

Object.create(proto [, propertiesObject ])

• proto 為新創(chuàng)建對象的原型對象，設置為null可創(chuàng)建沒有原型的空對象。

• propertiesObject 包涵若干個屬性的描述符和defineProperties的第二個參數(shù)一樣。

  Object.create(Object.prototype, { a: { value: 1, writable: true, configurable: true } });

創(chuàng)建一個繼承自Object.prototype的對象，有一個屬性a，其可寫，可配置，不可枚舉，值為1。

更多詳情。

defineProperty

Object.defineProperty() 方法直接在一個對象上定義一個新屬性，或者修改一個已經(jīng)存在的屬性， 并返回這個對象。

Object.defineProperty(obj, prop, descriptor)

descriptor 可包含4個屬性，如下：

• configurable 當且僅當這個屬性描述符值為 true 時，該屬性可能會改變，也可能會被從相應的對象刪除。默認為 false。
• enumerable true 當且僅當該屬性出現(xiàn)在相應的對象枚舉屬性中。默認為 false。
• value 屬性的值
• writable 定義屬性值是否可寫。
• get 一個給屬性提供 getter 的方法，如果沒有 getter 則為 undefined。方法將返回用作屬性的值。默認為 undefined。
• set 同get一起使用，功能互補。

其中value和writable一組，get和set一組，不可同時出現(xiàn)。

// 顯式
Object.defineProperty(obj, "key", {
	enumerable: false,
	configurable: false,
	writable: false,
	value: "static"
});

上面給obj對象定義了一個屬性key，其不可枚舉，不可配置，只讀，值為static。

更多詳情。

defineProperties

Object.defineProperties() 方法在一個對象上添加或修改一個或者多個自有屬性，并返回該對象。

Object.defineProperties(obj, props)

更多詳情。

getPrototypeOf

Object.getPrototypeOf() 方法返回指定對象的原型（也就是該對象內(nèi)部屬性[[Prototype]]的值）。

Object.getPrototypeOf(object)

可以用來獲取對象的原型。

Object.getPrototypeOf({}) === Object.prototype
// > true

在es5之前，要達到上面同樣的方法，只能使用 constructor。

({}).constructor.prototype === Object.prototype
// > true

但對于自定義的構(gòu)造函數(shù)，如果復寫了prototype，可能導致獲取的constructor不正確，如何解決這個問題，可以看這篇文章。

更多詳情。

getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor() 返回指定對象上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進行查找的屬性）

Object.getOwnPropertyDescriptor(obj, prop)

可用來獲取或查看對象屬性的特性。

var obj = {a: 1};
Object.getOwnPropertyDescriptor(obj, 'a');
// > Object {value: 1, writable: true, enumerable: true, configurable: true}

更多詳情。

keys

Object.keys() 方法會返回一個由給定對象的所有可枚舉自身屬性的屬性名組成的數(shù)組，數(shù)組中屬性名的排列順序和使用for-in循環(huán)遍歷該對象時返回的順序一致（兩者的主要區(qū)別是 for-in 還會遍歷出一個對象從其原型鏈上繼承到的可枚舉屬性）。

Object.keys(obj)

典型的用法如下：

var obj = {a: 1, b: 2};
console.log(Object.keys(obj));
// > ["a", "b"]

keys可以用來代替原來的for in循環(huán)，借助es5新增的數(shù)組方法，可提升代碼可讀性。

Object.keys(obj).forEach(function (val) {console.log(val)});

更多詳情。

getOwnPropertyNames

Object.getOwnPropertyNames()方法返回一個由指定對象的所有自身屬性的屬性名（包括不可枚舉屬性）組成的數(shù)組。

Object.getOwnPropertyNames(obj)

其和Object.keys的區(qū)別就是能夠獲取自身的全部屬性，包括不可枚舉屬性。

preventExtensions

Object.preventExtensions() 方法讓一個對象變的不可擴展，也就是永遠不能再添加新的屬性。

Object.preventExtensions(obj)

需要注意的是不可擴展的對象的屬性通常仍然可以被刪除。

嘗試給一個不可擴展對象添加新屬性的操作將會失敗，在非嚴格模式下是靜默的，在嚴格模式下會拋出TypeError異常。

Object.preventExtensions 只能阻止一個對象不能再添加新的自身屬性，仍然可以為該對象的原型添加屬性。

在 ECMAScript 5 中可擴展的對象可以變得不可擴展，但反過來不行。

更多詳情。

isExtensible

Object.isExtensible() 方法判斷一個對象是否是可擴展的（是否可以在它上面添加新的屬性）。

更多詳情。

seal

Object.seal() 方法可以讓一個對象密封，并返回被密封后的對象。密封對象是指那些不能添加新的屬性，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫性，但可能可以修改已有屬性的值的對象。

Object.seal(obj)

密封一個對象會讓這個對象變的變?yōu)椴豢蓴U展的，且所有已有屬性會變的不可配置。屬性不可配置的效果就是屬性變的不可刪除，以及一個數(shù)據(jù)屬性不能被重新定義成為訪問器屬性，或者反之。但屬性的值仍然可以修改。

嘗試刪除一個密封對象的屬性或者將某個密封對象的屬性從數(shù)據(jù)屬性轉(zhuǎn)換成訪問器屬性，結(jié)果會靜默失敗或拋出TypeError異常（嚴格模式）。

更多詳情。

isSealed

Object.isSealed() 方法判斷一個對象是否是密封的（sealed）。

更多詳情。

freeze

Object.freeze() 方法可以凍結(jié)一個對象。凍結(jié)對象是指那些不能添加新的屬性，不能修改已有屬性的值，不能刪除已有屬性，以及不能修改已有屬性的可枚舉性、可配置性、可寫性的對象。也就是說，這個對象永遠是不可變的。該方法返回被凍結(jié)的對象。

Object.freeze(obj)

凍結(jié)對象是不可擴展的，密封的，同時期值屬性的writable會被設置為false，set也將失效，總之會變?yōu)椴豢筛?。任何嘗試修改該對象的操作都會失敗，可能是靜默失敗，也可能會拋出異常（嚴格模式）。

isFrozen

Object.isFrozen() 方法判斷一個對象是否被凍結(jié)（frozen）。

更多詳情。

assign

Object.assign() 方法可以把任意多個的源對象自身的可枚舉屬性拷貝給目標對象，然后返回目標對象。

更多詳情

Object.assign(target, ...sources)

getOwnPropertySymbols

Object.getOwnPropertySymbols() 方法會返回一個數(shù)組，該數(shù)組包含了指定對象自身的（非繼承的）所有 symbol 屬性鍵。

更多詳情

is

Object.is() 方法用來判斷兩個值是否是同一個值。

Object.is與嚴格比較運算符（===）的行為基本一致，不同之處只有兩個：一是+0不等于-0，二是NaN等于自身。

更多詳情

setPrototypeOf

將一個指定的對象的原型設置為另一個對象或者null(既對象的[[Prototype]]內(nèi)部屬性)。

Object.setPrototypeOf(obj, prototype)

更多詳情

Object.prototype

Object.prototype上的方法，都是實例方法，必須在對象實例上調(diào)用。

• hasOwnProperty
• isPrototypeOf⑤
• propertyIsEnumerable⑤
• __proto__ ⑥

hasOwnProperty

hasOwnProperty() 方法用來判斷某個對象是否含有指定的自身屬性。

obj.hasOwnProperty(prop)

在沒有Object.keys之前，借助hasOwnProperty，可以讓for in 達到類似的效果，代碼如下：

for(var key in obj) {
	if (obj.hasOwnProperty(key)) {
		//過濾掉原型上的方法
	}	
}

更多詳情。

isPrototypeOf

isPrototypeOf() 方法測試一個對象是否存在于另一個對象的原型鏈上。

prototype.isPrototypeOf(object)

更多詳情。

propertyIsEnumerable

propertyIsEnumerable() 方法返回一個布爾值，表明指定的屬性名是否是當前對象可枚舉的自身屬性。

obj.propertyIsEnumerable(prop)

從原型鏈上繼承的屬性,所以該方法會返回false。

如果對象沒有指定的屬性，該方法返回 false。

更多詳情。

__proto__

一個對象的__proto__ 屬性和自己的內(nèi)部屬性[[Prototype]]指向一個相同的值 (通常稱這個值為原型)，原型的值可以是一個對象值也可以是null(比如說Object.prototype.__proto__的值就是null).該屬性可能會引發(fā)一些錯誤，因為用戶可能會不知道該屬性的特殊性，而給它賦值，從而改變了這個對象的原型。 如果需要訪問一個對象的原型，應該使用方法Object.getPrototypeOf。 __proto__ 屬性已經(jīng)被添加在了ES6草案 §B.3.1中。

更多詳情。

總結(jié)

除了上面介紹的方法，還有一些實驗方法，和不常用的方法，可以在這里找到。

相關文章

• 有趣的JavaScript原生數(shù)組函數(shù)