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

作者：顏海鏡
原文地址：http://yanhaijing.com/javascript/2015/05/08/member-of-object/

最近在回家的路上讀了尼古拉斯的新書《JavaScript面向對象精要》，發現自己對對象的屬性和方法不是很熟悉，特別是es5新增的部分，特寫此文總結一下，同時也與大家共勉。

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

前言

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

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

上面的代碼會有如下的輸出：

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

Object

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

  • create⑤
  • defineProperty⑤
  • defineProperties⑤
  • getPrototypeOf⑤
  • getOwnPropertyDescriptor⑤
  • keys⑤
  • getOwnPropertyNames⑤
  • preventExtensions⑤
  • isExtensible⑤
  • seal⑤
  • isSealed⑤
  • freeze⑤
  • isFrozen⑤

帶⑤的為es5新增的方法。下面將會一一介紹上面的方法。

create

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

Object.create(proto [, propertiesObject ])
  • proto為新創建對象的原型對象，設置為null可創建沒有原型的空對象。
  • propertiesObject包涵若干個屬性的描述符和defineProperties的第二個參數一樣。
Object.create(Object.prototype, { a: { value: 1, writable: true, configurable: true } });

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

更多詳情。

defineProperty

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

Object.defineProperty(obj, prop, descriptor)

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

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

其中value和writable一組，get和set一組，不可同時出現。

// 顯式
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()方法返回指定對象的原型（也就是該對象內部屬性[[Prototype]]的值）。

Object.getPrototypeOf(object)

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

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

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

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

但對于自定義的構造函數，如果復寫了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()方法會返回一個由給定對象的所有可枚舉自身屬性的屬性名組成的數組，數組中屬性名的排列順序和使用for-in循環遍歷該對象時返回的順序一致（兩者的主要區別是for-in還會遍歷出一個對象，從其原型鏈上繼承到的可枚舉屬性）。

Object.keys(obj)

典型的用法如下：

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

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

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

更多詳情。

getOwnPropertyNames

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

Object.getOwnPropertyNames(obj)

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

preventExtensions

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

Object.preventExtensions(obj)

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

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

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

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

更多詳情。

isExtensible

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

更多詳情。

seal

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

Object.seal(obj)

密封一個對象會讓這個對象變的變為不可擴展的，且所有已有屬性會變的不可配置。屬性不可配置的效果就是屬性變的不可刪除，以及一個數據屬性不能被重新定義成為訪問器屬性，或者反之。但屬性的值仍然可以修改。

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

更多詳情。

isSealed

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

更多詳情。

freeze

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

Object.freeze(obj)

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

isFrozen

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

更多詳情。

Object.prototype

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

  • hasOwnProperty
  • isPrototypeOf⑤
  • propertyIsEnumerable⑤

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。

更多詳情。

總結

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容