JS基礎篇--JS中的可枚舉屬性與不可枚舉屬性以及擴展

dreamans 發布于2019-08-21 11:59 / 835人閱讀

摘要：在中，對象的屬性分為可枚舉和不可枚舉之分，它們是由屬性的值決定的。這是因為中內置的屬性是不可枚舉的，所以不能被訪問到。此對象不可擴展且指定的屬性名稱不存在。返回值一個數組，其中包含對象的可枚舉屬性和方法的名稱。

在JavaScript中，對象的屬性分為可枚舉和不可枚舉之分，它們是由屬性的enumerable值決定的?？擅杜e性決定了這個屬性能否被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

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

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 = "
";

// 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 = "
";

// 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 方法獲取該對象的屬性和方法。

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 對象中以字母“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 方法獲取該對象自己的屬性（包括方法）。

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...
相關閱讀：Javascript apply的巧妙用法以及擴展到Object.defineProperty的使用

云服務器 GPU云服務器 js包裝對象中的屬性屬性篇 js中的6大數據類型以及應用 js 更改屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87317.html

JS進階篇--JS apply的巧妙用法以及擴展到Object.defineProperty的使用

摘要：的使用對象是由多個名值對組成的無序的集合。目標屬性所擁有的特性返回值傳入函數的對象。是一種獲得屬性值的方法是一種設置屬性值的方法。參考相關閱讀鏈接基礎篇中的可枚舉屬性與不可枚舉屬性以及擴展 Math.max 實現得到數組中最大的一項 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(m...

jasperyang 2019-08-21 11:42 評論0 收藏0
JS基礎篇--HTML DOM classList 屬性

摘要：使用，程序員還可以用它來判斷某個節點是否被賦予了某個類?，F在是增加現在是刪除是否存在類檢查是否含有某個類結果是或者。屬性返回類列表中類的數量。查看元素有多少個類名獲取獲取元素的所有類名返回類名在元素中的索引值。頁面DOM里的每個節點上都有一個classList對象，程序員可以使用里面的方法新增、刪除、修改節點上的CSS類。使用classList，程序員還可以用它來判斷某個節點是否被賦...

snowell 2019-08-01 16:17 評論0 收藏0
JS學習之Object

摘要：文中的多為構造函數原型對象屬性為函數的專屬屬性，表示函數的原型對象。關于各種數據類型的屬性的展示對象的構造器函數該屬性指向創建該對象原型的構造函數。對對象的凍結狀態的設置和判斷，前者讓凍結對象，后者判斷對象是否被凍結。前言上篇文章介紹了JS的對象,本文將介紹Object這個基類，主要介紹其屬性和方法（其實這些在MDN里都有^_^,點擊這里可以直通MDN）。好了廢話不多說了，直接開始...

qujian 2019-08-20 13:42 評論0 收藏0
JS基礎05「對象」

摘要：對象是的數據類型。對象是動態的，可以隨時新增和刪除自有屬性?？蛻舳酥斜硎揪W頁結構的對象均是宿主對象。提供第二個可選參數，用以對對象的屬性進行進一步描述。沒有原型的對象為數不多，就是其中之一。運算符的左側是屬性名字符串，右側是對象。對象是 JavaScript 的數據類型。它將很多值（原始值或者其他對象）聚合在一起，可通過名字訪問這些值，因此我們可以把它看成是從字符串到值的映射。對象是...

frolc 2019-08-26 10:58 評論0 收藏0
淺談 JS 對象之擴展、密封及凍結三大特性

摘要：嘗試刪除一個密封對象的屬性或者將某個密封對象的屬性從數據屬性轉換成訪問器屬性，結果會靜默失敗或拋出異常嚴格模式。擴展特性 Object.isExtensible 方法 Object.preventExtensions 方法密封特性 Object.isSealed 方法 Object.seal 方法凍結特性 Object.isFrozen 方法 Object...

ChristmasBoy 2019-08-22 10:58 評論0 收藏0