備注：本文長期修改

目錄

屬性描述符

數據屬性: 修改屬性的一些特性

訪問器屬性: 設置或獲取對象的某個屬性的值。

操作屬性特性的方法

Object.defineProperty(): 設置或修改單個屬性的特性

Object.defineProperties(): 設置或修改多個屬性的特性

Object.getOwnPropertyDescriptor(): 讀取屬性的特性，取得給定屬性的描述符

說明：ECMAScript中屬性有兩種：數據屬性和訪問器屬性。

屬性描述符

1.1 數據屬性

說明：當修改或定義對象的某個屬性的時候，給這個屬性添加一些特性。

特性名稱描述默認值

value	設置屬性的值	undefined
writable	設置是否可修改值	true
enumerable	表示能否通過for-in或 obj.keys()循環返回屬性。	true
configurable	表示能否通過 delete 刪除屬性從而重新定義屬性 能否修改屬性的特性 能否把屬性修改為訪問器屬性	true

var obj = {test:"hello" } //對象已有的屬性添加特性描述 Object.defineProperty(obj,"test",{configurable:true | false,enumerable:true | false,value:任意類型的值,writable:true | false }); //對象新添加的屬性的特性描述 Object.defineProperty(obj,"newKey",{configurable:true | false,enumerable:true | false,value:任意類型的值,writable:true | false });

在使用 Object.defineProperty、Object.defineProperties 或 Object.create 函數的情況下添加數據屬性，writable、enumerable和configurable默認值為 false。

使用 對象字面量 創建的屬性，writable、enumerable和configurable特性默認為true。

1.2 訪問器屬性

說明：設置或獲取對象的某個屬性的值。

特性名稱描述默認值

Get	在讀取屬性時調用的函數	undefined
Set	在寫入屬性時調用的函數	true
enumerable	是否可以被枚舉（使用for...in或Object.keys()）	true
configurable	表示能否通過 delete 刪除屬性從而重新定義屬性 能否修改屬性的特性 能否把屬性修改為訪問器屬性(目標屬性是否可以再次設置特性)	true

var obj = {}; Object.defineProperty(obj, "newKey", {get:function (){} | undefined,set:function (value){} | undefinedconfigurable: true | falseenumerable: true | false });

注意：當使用了getter或setter方法，不允許使用writable和value這兩個屬性

ECMAScript 5中操作屬性特性的方法：

2.1 Object.defineProperty()

說明：此方法只能定義一個屬性

語法：

Object.defineProperty(obj, prop, descriptor)

參數列表：

obj：必需。目標對象 prop：必需。需定義或修改的屬性的名字 descriptor：必需。目標屬性所擁有的特性

返回值：

傳入函數的對象。即第一個參數obj

示例

var obj = {};// Object.defineProperty(對象，屬性，屬性描述符) Object.defineProperty(obj, "name", {get: function(){return this._name; //在 get 和 set 中使用訪問屬性必須加 "_"},set: function(val){if(Array.isArray(val)){this._name = val;} else{this._name = "不是數組不能賦值";}},enumerable: true, // 表示可枚舉的configurable: true // 是否可刪除屬性 });// Object {get: function, set: function, enumerable: true, configurable: true} console.log(Object.getOwnPropertyDescriptor(obj, 'name')); obj.name = "111"; console.log(obj.name);

2.2 Object.defineProperties()

說明：此方法用來定義多個屬性。

示例

var obj = {};Object.defineProperties(obj, {name: {value: "周華健",writable: true},age: {value: 30,writable: true},sex: {get: function(){return this._sex;},set: function(val){if(val === 1){this._sex = "男";}else{this._sex = "女";}}} });obj.sex = 0;console.log(obj.sex); //女

2.3 Object.getOwnPropertyDescriptor()

說明：讀取屬性的特性，取得給定屬性的描述符

參數：

屬性所在的對象和要讀取其描述符的屬性名稱

返回值：

//訪問器屬性 Object { configurable 、 enumerable 、 get 和 set}//數據屬性 Object {configurable 、 enumerable 、 writable 和 value}

示例

var obj = {};Object.defineProperties(obj, {name: {value: "大爺"},age: {value: 99},sex: {get: function(){return this._sex;},set: function(val){if(val){this._sex = val;}else{this._sex = "man";}}} });obj.sex = "woman";var descipt = Object.getOwnPropertyDescriptor(obj, "sex");console.log(descipt.get); // [Function: get] console.log(descipt.set); // [Function: set] console.log(descipt.enumerable); // false console.log(descipt.configurable); // false

轉載于:https://www.cnblogs.com/hm0818/p/9142433.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的JavaScript -- 理解对象的属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。