摘要：在中，對(duì)象的屬性分為可枚舉和不可枚舉之分，它們是由屬性的值決定的。這是因?yàn)橹袃?nèi)置的屬性是不可枚舉的，所以不能被訪問(wèn)到。此對(duì)象不可擴(kuò)展且指定的屬性名稱(chēng)不存在。返回值一個(gè)數(shù)組，其中包含對(duì)象的可枚舉屬性和方法的名稱(chēng)。

在JavaScript中，對(duì)象的屬性分為可枚舉和不可枚舉之分，它們是由屬性的enumerable值決定的。可枚舉性決定了這個(gè)屬性能否被for…in查找遍歷到。

js中基本包裝類(lèi)型的原型屬性是不可枚舉的，如Object, Array, Number等，如果你寫(xiě)出這樣的代碼遍歷其中的屬性：

var num = new Number();
for(var pro in num) {
    console.log("num." + pro + " = " + num[pro]);
}

它的輸出結(jié)果會(huì)是空。這是因?yàn)?b>Number中內(nèi)置的屬性是不可枚舉的，所以不能被for…in訪問(wèn)到。

Object對(duì)象的propertyIsEnumerable()方法可以判斷此對(duì)象是否包含某個(gè)屬性，并且這個(gè)屬性是否可枚舉。

需要注意的是：如果判斷的屬性存在于Object對(duì)象的原型內(nèi)，不管它是否可枚舉都會(huì)返回false。

屬性的枚舉性會(huì)影響以下三個(gè)函數(shù)的結(jié)果：

for…in

Object.keys()

JSON.stringify

先看一個(gè)例子，按如下方法創(chuàng)建kxy對(duì)象：

function Person() {
    this.name = "KXY";
}
Person.prototype = {
    constructor: Person,
    job: "student",
};
 
var kxy = new Person();
Object.defineProperty(kxy, "sex", {
    value: "female",
    enumerable: false
});

其中用defineProperty為對(duì)象定義了一個(gè)名為”sex”的不可枚舉屬性

接下來(lái)做以下驗(yàn)證：
a.

for(var pro in kxy) {
    console.log("kxy." + pro + " = " + kxy[pro]);
  }

結(jié)果：

kxy.name = KXY
kxy.constructor = function Person() {
    this.name = "KXY";
}
kxy.job = student

可以看到除了”sex“之外的屬性都遍歷到了

b.

console.log(Object.keys(kxy));

返回結(jié)果：["name"]
只包含”name”屬性，說(shuō)明該方法只能返回對(duì)象本身具有的可枚舉屬性。

c.

console.log(JSON.stringify(kxy));

返回結(jié)果：{"name":"KXY"}
此方法也只能讀取對(duì)象本身的可枚舉屬性，并序列化為JSON字符串（通過(guò)typeof JSON.stringify(kxy)得到string類(lèi)型）。

上面用到了Object.defineProperty()方法，下面講解下。

Object.defineProperty(object, propertyname, descriptor)

參數(shù)：

object：必需。 要在其上添加或修改屬性的對(duì)象。 這可能是一個(gè)本機(jī) JavaScript 對(duì)象（即用戶定義的對(duì)象或內(nèi)置對(duì)象）或 DOM 對(duì)象。

propertyname：必需。 一個(gè)包含屬性名稱(chēng)的字符串。

descriptor：必需。 屬性描述符。 它可以針對(duì)數(shù)據(jù)屬性或訪問(wèn)器屬性。

返回值：已修改對(duì)象。

備注：
可使用 Object.defineProperty 函數(shù)來(lái)執(zhí)行以下操作：

向?qū)ο筇砑有聦傩浴? 當(dāng)對(duì)象不具有指定的屬性名稱(chēng)時(shí)，發(fā)生此操作。

修改現(xiàn)有屬性的特性。 當(dāng)對(duì)象已具有指定的屬性名稱(chēng)時(shí)，發(fā)成此操作。

描述符對(duì)象中會(huì)提供屬性定義，用于描述數(shù)據(jù)屬性或訪問(wèn)器屬性的特性。 描述符對(duì)象是 Object.defineProperty 函數(shù)的參數(shù)。

若要向?qū)ο筇砑佣鄠€(gè)屬性或修改多個(gè)現(xiàn)有屬性，可使用 Object.defineProperties 函數(shù) (JavaScript)。

如果以下任一條件為 true，則引發(fā) TypeError 異常：

object 參數(shù)不是對(duì)象。

此對(duì)象不可擴(kuò)展且指定的屬性名稱(chēng)不存在。

descriptor 具有 value 或 writable 特性，并且具有 get 或 set 特性。

descriptor 具有 get 或 set 特性，上述特性不是函數(shù)且已定義。

指定的屬性名稱(chēng)已存在，現(xiàn)有屬性具有 false 的 configurable 特性，且 descriptor 包含一個(gè)或多個(gè)與現(xiàn)有屬性中特性不同的特性。 但是，當(dāng)現(xiàn)有屬性具有 false 的 configurable 特性和 true 的 writable 特性時(shí)，則允許 value 或 writable 特性不同。

在以下示例中，Object.defineProperty 函數(shù)向用戶定義的對(duì)象添加數(shù)據(jù)屬性。 若改為向現(xiàn)有的 DOM 對(duì)象添加屬性，則取消對(duì) var = window.document 行的注釋。

var newLine = "
";

// Create a user-defined object.
var obj = {};

// Add a data property to the object.
Object.defineProperty(obj, "newDataProperty", {
    value: 101,
    writable: true,
    enumerable: true,
    configurable: true
});

// Set the property value.
obj.newDataProperty = 102;
document.write("Property value: " + obj.newDataProperty + newLine);

// Output:
// Property value: 102

若要列出對(duì)象屬性，請(qǐng)將以下代碼添加到此示例中。

var names = Object.getOwnPropertyNames(obj);
for (var i = 0; i < names.length; i++) {
    var prop = names[i];

    document.write(prop + ": " + obj[prop]);
    document.write(newLine);
}

// Output:
//  newDataProperty: 102

若要修改對(duì)象的屬性特性，請(qǐng)將以下代碼添加到前面所示的 addDataProperty 函數(shù)。 descriptor 參數(shù)只包含 writable 特性。 其他數(shù)據(jù)屬性特性保持不變。

// Modify the writable attribute of the property.
Object.defineProperty(obj, "newDataProperty", { writable: false });

// List the property attributes by using a descriptor.
// Get the descriptor with Object.getOwnPropertyDescriptor.
var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
for (var prop in descriptor) {
    document.write(prop + ": " + descriptor[prop]);
    document.write(newLine);
}

// Output
// writable: false
// value: 102
// configurable: true
// enumerable: true

在以下示例中，Object.defineProperty 函數(shù)向用戶定義的對(duì)象添加訪問(wèn)器屬性。

var newLine = "
";

// Create a user-defined object.
var obj = {};

// Add an accessor property to the object.
Object.defineProperty(obj, "newAccessorProperty", {
    set: function (x) {
        document.write("in property set accessor" + newLine);
        this.newaccpropvalue = x;
    },
    get: function () {
        document.write("in property get accessor" + newLine);
        return this.newaccpropvalue;
    },
    enumerable: true,
    configurable: true
});

// Set the property value.
obj.newAccessorProperty = 30;
document.write("Property value: " + obj.newAccessorProperty + newLine);

// Output:
// in property set accessor
// in property get accessor
// Property value: 30

若要列出對(duì)象屬性，請(qǐng)將以下代碼添加到此示例中。

var names = Object.getOwnPropertyNames(obj);
for (var i = 0; i < names.length; i++) {
    var prop = names[i];

    document.write(prop + ": " + obj[prop]);
    document.write(newLine);
}
// Output:
// in property get accessor
// newAccessorProperty: 30

若要修改對(duì)象的訪問(wèn)器屬性，請(qǐng)將以下代碼添加前面所示的代碼。 descriptor 參數(shù)只包含 get 訪問(wèn)器定義。 其他屬性特性保持不變。

// Modify the get accessor.
Object.defineProperty(obj, "newAccessorProperty", {
    get: function () { return this.newaccpropvalue; }
});

// List the property attributes by using a descriptor.
// Get the descriptor with Object.getOwnPropertyDescriptor.
var descriptor = Object.getOwnPropertyDescriptor(obj, "newAccessorProperty");
for (var prop in descriptor) {
    document.write(prop + ": " + descriptor[prop]);
    document.write(newLine);
}

// Output:
// get: function () { return this.newaccpropvalue; }
// set: function (x) { document.write("in property set accessor" + newLine); this.newaccpropvalue = x; }
// configurable: true
// enumerable: true

下面的示例演示如何通過(guò)使用 Object.getOwnPropertyDescriptor 函數(shù)來(lái)獲取和修改屬性的屬性描述符，從而自定義內(nèi)置 DOM 屬性。 對(duì)于此示例中，必須通過(guò)使用 ID 為“div”的 DIV 元素。

// Get the querySelector property descriptor.
var descriptor = Object.getOwnPropertyDescriptor(Element.prototype, "querySelector");

// Make the property read-only.
descriptor.value = "query";
descriptor.writable = false;
// Apply the changes to the Element prototype.
Object.defineProperty(Element.prototype, "querySelector", descriptor);

// Get a DOM element from the HTML body.
var elem = document.getElementById("div");

// Attempt to change the value. This causes the revised value attribute to be called.
elem.querySelector = "anotherQuery";
document.write(elem.querySelector);

// Output:
// query

返回對(duì)象的可枚舉屬性和方法的名稱(chēng)。

Object.keys(object)

參數(shù)object:必需。包含屬性和方法的對(duì)象。這可以是您創(chuàng)建的對(duì)象或現(xiàn)有文檔對(duì)象模型 (DOM) 對(duì)象。
返回值：一個(gè)數(shù)組，其中包含對(duì)象的可枚舉屬性和方法的名稱(chēng)。
異常：如果為 object 參數(shù)提供的值不是對(duì)象的名稱(chēng)，則將引發(fā) TypeError 異常。

keys 方法僅返回可枚舉屬性和方法的名稱(chēng)。若要返回可枚舉的和不可枚舉的屬性和方法的名稱(chēng)，可使用 Object.getOwnPropertyNames 函數(shù) (JavaScript)。
有關(guān)屬性的 enumerable 特性的信息，請(qǐng)參見(jiàn) Object.defineProperty 函數(shù) (JavaScript)和 Object.getOwnPropertyDescriptor 函數(shù) (JavaScript)。

下面的示例創(chuàng)建一個(gè)對(duì)象，該對(duì)象具有三個(gè)屬性和一個(gè)方法。然后使用 keys 方法獲取該對(duì)象的屬性和方法。

js代碼：

// Create a constructor function.
function Pasta(grain, width, shape) {
   this.grain = grain;
   this.width = width;
   this.shape = shape;

   // Define a method.
   this.toString = function () {
       return (this.grain + ", " + this.width + ", " + this.shape);
   }
}

// Create an object.
var spaghetti = new Pasta("wheat", 0.2, "circle");

// Put the enumerable properties and methods of the object in an array.
var arr = Object.keys(spaghetti);
document.write (arr);

// Output:
// grain,width,shape,toString

下面的示例顯示 Pasta 對(duì)象中以字母“g”開(kāi)頭的所有可枚舉屬性的名稱(chēng)。

// Create a constructor function.
function Pasta(grain, width, shape) {
    this.grain = grain;
    this.width = width;
    this.shape = shape;
}

var polenta = new Pasta("corn", 1, "mush");

var keys = Object.keys(polenta).filter(CheckKey);
document.write(keys);

// Check whether the first character of a string is "g".
function CheckKey(value) {
    var firstChar = value.substr(0, 1);
    if (firstChar.toLowerCase() == "g")
        return true;
    else
        return false;
}

// Output:
// grain

返回對(duì)象自己的屬性的名稱(chēng)。一個(gè)對(duì)象的自己的屬性是指直接對(duì)該對(duì)象定義的屬性，而不是從該對(duì)象的原型繼承的屬性。對(duì)象的屬性包括字段（對(duì)象）和函數(shù)。

Object.getOwnPropertyNames(object)

參數(shù)：object，必需。包含自己的屬性的對(duì)象。
返回值：一個(gè)數(shù)組，其中包含對(duì)象自己的屬性的名稱(chēng)。
異常：如果為 object 參數(shù)提供的值不是對(duì)象的名稱(chēng)，則將引發(fā) TypeError 異常。

getOwnPropertyNames 方法同時(shí)返回可枚舉的和不可枚舉的屬性和方法的名稱(chēng)。若要僅返回可枚舉的屬性和方法的名稱(chēng)，可使用 Object.keys 函數(shù) (JavaScript)。

下面的示例創(chuàng)建一個(gè)對(duì)象，該對(duì)象具有三個(gè)屬性和一個(gè)方法。然后使用 getOwnPropertyNames 方法獲取該對(duì)象自己的屬性（包括方法）。

function Pasta(grain, width, shape) {
   // Define properties.
   this.grain = grain;
   this.width = width;
   this.shape = shape;
   this.toString = function () {
       return (this.grain + ", " + this.width + ", " + this.shape);
   }
}

// Create an object.
var spaghetti = new Pasta("wheat", 0.2, "circle");

// Get the own property names.
var arr = Object.getOwnPropertyNames(spaghetti);
document.write (arr);

// Output:
//   grain,width,shape,toString

下面的示例顯示了使用 Pasta 構(gòu)造函數(shù)構(gòu)造的 spaghetti 對(duì)象中以字母“S”開(kāi)頭的屬性名。

function Pasta(grain, size, shape) {
    this.grain = grain; 
    this.size = size; 
    this.shape = shape; 
}

var spaghetti = new Pasta("wheat", 2, "circle");

var names = Object.getOwnPropertyNames(spaghetti).filter(CheckKey);
document.write(names); 

// Check whether the first character of a string is "s". 
function CheckKey(value) {
    var firstChar = value.substr(0, 1); 
    if (firstChar.toLowerCase() == "s")
        return true; 
    else
         return false; 
}
// Output:
// size,shape

https://msdn.microsoft.com/zh...
https://msdn.microsoft.com/li...
https://msdn.microsoft.com/zh...
相關(guān)閱讀：Javascript apply的巧妙用法以及擴(kuò)展到Object.defineProperty的使用