JS中的可列舉屬性與不可列舉屬性

阿新 • • 發佈：2019-02-06

一、怎麼判斷屬性是否可列舉

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 = "<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 方法獲取該物件的屬性和方法。

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

JS中的可列舉屬性與不可列舉屬性

一、怎麼判斷屬性是否可列舉

二、列舉性的作用

Object.defineProperty()

語法

異常

新增資料屬性

修改資料屬性

新增訪問器屬性

修改訪問器屬性

修改 DOM 元素上的屬性

Object.keys()

語法

備註

Object.getOwnPropertyNames()

語法

備註

JS中的可列舉屬性與不可列舉屬性

css中可繼承屬性與不可繼承屬性

CSS可繼承屬性與不可繼承屬性

CSS常見可繼承屬性與不可繼承屬性

JavaScript中的可枚舉屬性與不可枚舉屬性

可列舉與不可列舉

js、jq和標籤裡面設定按鈕可點選與不可點選狀態

js中屬性類型：數據屬性與訪問器屬性

js中eval，arguments與異常處理的用法-基礎知識總結------彭記（017）

Angular.js 中 copy 賦值與 = 賦值區別

JS中document對象的一些重要屬性

js中的深拷貝與淺拷貝

Js中常用知識點（typeof、動態屬性、變量作用域）

js中的new操作符與Object.create()的作用與區別

js中給json對象添加屬性和json數組添加元素

three.js中render渲染器與html中body顯示之間的聯絡

Node.js中fs檔案系統-與檔案file相關；

js中的 substr方法與substring方法不同

JS中的建構函式與與原型物件的理解

js中的string型別與number型別的轉換以及字串的基本常見操作

JS中的可列舉屬性與不可列舉屬性

一、怎麼判斷屬性是否可列舉

二、列舉性的作用

Object.defineProperty()

語法

異常

新增資料屬性

修改資料屬性

新增訪問器屬性

修改訪問器屬性

修改 DOM 元素上的屬性

Object.keys()

語法

備註

Object.getOwnPropertyNames()

語法

備註

相關推薦