JS中的可枚舉屬性與不可枚舉屬性以及擴展

本文轉載自查看原文 2017-08-18 14:23 3654 js不可枚舉屬性/ js可枚舉屬性/ Object.defineProperty()/ Object.keys()/ Object.getOwnPropertyNames()/ javascript

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

一、怎么判斷屬性是否可枚舉

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

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

它的輸出結果會是空。這是因為Number中內置的屬性是不可枚舉的，所以不能被for…in訪問到。

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

需要注意的是：如果判斷的屬性存在於Object對象的原型內，不管它是否可枚舉都會返回false。

二、枚舉性的作用

屬性的枚舉性會影響以下三個函數的結果：

for…in

Object.keys()

JSON.stringify

先看一個例子，按如下方法創建kxy對象：

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

其中用defineProperty為對象定義了一個名為”sex”的不可枚舉屬性

接下來做以下驗證：
a.

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

結果：

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

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

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

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

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

Object.defineProperty()

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

語法

Object.defineProperty(object, propertyname, descriptor)

參數：

object：必需。要在其上添加或修改屬性的對象。這可能是一個本機 JavaScript 對象（即用戶定義的對象或內置對象）或 DOM 對象。
propertyname：必需。一個包含屬性名稱的字符串。
descriptor：必需。屬性描述符。它可以針對數據屬性或訪問器屬性。

返回值：已修改對象。

備注：
可使用 Object.defineProperty 函數來執行以下操作：

向對象添加新屬性。當對象不具有指定的屬性名稱時，發生此操作。
修改現有屬性的特性。當對象已具有指定的屬性名稱時，發成此操作。

描述符對象中會提供屬性定義，用於描述數據屬性或訪問器屬性的特性。描述符對象是 Object.defineProperty 函數的參數。

若要向對象添加多個屬性或修改多個現有屬性，可使用 Object.defineProperties 函數 (JavaScript)。

異常

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

object 參數不是對象。
此對象不可擴展且指定的屬性名稱不存在。
descriptor 具有 value 或 writable 特性，並且具有 get 或 set 特性。
descriptor 具有 get 或 set 特性，上述特性不是函數且已定義。
指定的屬性名稱已存在，現有屬性具有 false 的 configurable 特性，且 descriptor 包含一個或多個與現有屬性中特性不同的特性。但是，當現有屬性具有 false 的 configurable 特性和 true 的 writable 特性時，則允許 value 或 writable 特性不同。

添加數據屬性

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

var newLine = "<br />";

// 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

若要列出對象屬性，請將以下代碼添加到此示例中。

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

修改數據屬性

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

// 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 函數向用戶定義的對象添加訪問器屬性。

var newLine = "<br />";

// 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

若要列出對象屬性，請將以下代碼添加到此示例中。

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

修改訪問器屬性

若要修改對象的訪問器屬性，請將以下代碼添加前面所示的代碼。 descriptor 參數只包含 get 訪問器定義。其他屬性特性保持不變。

// 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

修改 DOM 元素上的屬性

下面的示例演示如何通過使用 Object.getOwnPropertyDescriptor 函數來獲取和修改屬性的屬性描述符，從而自定義內置 DOM 屬性。對於此示例中，必須通過使用 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

Object.keys()

返回對象的可枚舉屬性和方法的名稱。

語法

Object.keys(object)

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

備注

keys 方法僅返回可枚舉屬性和方法的名稱。若要返回可枚舉的和不可枚舉的屬性和方法的名稱，可使用 Object.getOwnPropertyNames 函數 (JavaScript)。
有關屬性的 enumerable 特性的信息，請參見 Object.defineProperty 函數 (JavaScript)和 Object.getOwnPropertyDescriptor 函數 (JavaScript)。

下面的示例創建一個對象，該對象具有三個屬性和一個方法。然后使用 keys 方法獲取該對象的屬性和方法。

// 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 對象中以字母“g”開頭的所有可枚舉屬性的名稱。

// 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

Object.getOwnPropertyNames()

返回對象自己的屬性的名稱。一個對象的自己的屬性是指直接對該對象定義的屬性，而不是從該對象的原型繼承的屬性。對象的屬性包括字段（對象）和函數。

語法

Object.getOwnPropertyNames(object)

參數：object，必需。包含自己的屬性的對象。
返回值：一個數組，其中包含對象自己的屬性的名稱。
異常：如果為 object 參數提供的值不是對象的名稱，則將引發 TypeError 異常。

備注

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

下面的示例創建一個對象，該對象具有三個屬性和一個方法。然后使用 getOwnPropertyNames 方法獲取該對象自己的屬性（包括方法）。

js代碼：

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 構造函數構造的 spaghetti 對象中以字母“S”開頭的屬性名。

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...

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS中的可枚舉屬性與不可枚舉屬性對象可枚舉和不可枚舉屬性獲取對象屬性（所有屬性、可枚舉、不可枚舉、自身屬性【非原型鏈繼承】）個數詳解 js中 '枚舉' 的使用 JS枚舉對象屬性的方法及其區別 css中可以和不可以繼承的屬性 JS對象-不可擴展對象、密封對象、凍結對象 JS中禁止對象屬性擴展、密封對象、凍結對象 JS中禁止對象屬性擴展、密封對象、凍結對象 js對象中什么是可枚舉性(enumerable)？