将属性添加到对象,或修改现有属性的特性。
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
下面的示例演示如何通过使用 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
时间: 2024-10-01 04:26:31