Object.defineProperty 函数 (JavaScript)
2015-01-14 09:47
661 查看
将属性添加到对象或修改现有属性的特性。
Object.defineProperty(object, propertyname, descriptor)
参数:
object
必需。 对其添加或修改属性的对象。 这可以是本机 JavaScript 对象(即用户定义的对象或内置对象)或 DOM 对象。
propertyname
必需。 一个包含属性名称的字符串。
descriptor
必需。 属性的描述符。 它可以针对数据属性或访问器属性。
返回值:
已修改的对象。
备注:
可使用 Object.defineProperty 函数来执行下面的操作:
将新属性添加到对象。 在对象没有指定的属性名称时执行此操作。
修改现有属性的特性。 在对象已有指定的属性名称时执行此操作。
描述符对象中提供了属性定义,它描述了数据属性或访问器属性的特性。 描述符对象是 Object.defineProperty 函数的参数。
若要将多个属性添加到对象或要修改多个现有属性,可以使用 Object.defineProperties 函数 (JavaScript)。
异常:
如果满足下列任一条件,则将引发 TypeError 异常:
object 参数不是对象。
此对象不是可扩展的,并且指定的属性名不存在。
descriptor 具有一个 value 或 writable 特性,并且具有 get 或 set 特性。
descriptor 具有一个不为函数或未定义的 get 或 set 特性。
指定的属性名称已存在,现有属性的 configurable 特性为 false,并且 descriptor 包含一个或多个与现有属性中的特性不同的特性。 但是,当现有属性的 configurable 特性为 false,且 writable 特性为 true 时,允许 value 或 writable 特性不同。
添加数据属性:
在下面的示例中,Object.defineProperty 函数将数据属性添加到用户定义的对象。 若要改为向现有 DOM 对象添加属性,则取消注释 var = window.document 行。
若要修改对象属性的特性,请将以下代码添加到前面所示的 addDataProperty 函数。 descriptor 参数只包含一个 writable 特性。 其他数据属性的特性保持不变。
在下面的示例中,Object.defineProperty 函数将访问器属性添加到用户定义的对象。
若要修改对象属性的特性,请将以下代码添加到前面所示的代码中。 descriptor 参数只包含一个 get 访问器定义。 其他属性的特性保持不变。
以下示例演示如何通过使用 Object.getOwnPropertyDescriptor 函数获取和修改属性的属性描述符来自定义内置 DOM 属性。 在此示例中,必须有一个 ID 为“div”的 DIV 元素。
Object.defineProperty(object, propertyname, descriptor)
参数:
object
必需。 对其添加或修改属性的对象。 这可以是本机 JavaScript 对象(即用户定义的对象或内置对象)或 DOM 对象。
propertyname
必需。 一个包含属性名称的字符串。
descriptor
必需。 属性的描述符。 它可以针对数据属性或访问器属性。
返回值:
已修改的对象。
备注:
可使用 Object.defineProperty 函数来执行下面的操作:
将新属性添加到对象。 在对象没有指定的属性名称时执行此操作。
修改现有属性的特性。 在对象已有指定的属性名称时执行此操作。
描述符对象中提供了属性定义,它描述了数据属性或访问器属性的特性。 描述符对象是 Object.defineProperty 函数的参数。
若要将多个属性添加到对象或要修改多个现有属性,可以使用 Object.defineProperties 函数 (JavaScript)。
异常:
如果满足下列任一条件,则将引发 TypeError 异常:
object 参数不是对象。
此对象不是可扩展的,并且指定的属性名不存在。
descriptor 具有一个 value 或 writable 特性,并且具有 get 或 set 特性。
descriptor 具有一个不为函数或未定义的 get 或 set 特性。
指定的属性名称已存在,现有属性的 configurable 特性为 false,并且 descriptor 包含一个或多个与现有属性中的特性不同的特性。 但是,当现有属性的 configurable 特性为 false,且 writable 特性为 true 时,允许 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
相关文章推荐
- JavaScript中对Object.defineProperty 函数 的理解
- Object.defineProperty 函数 (JavaScript)
- Object.defineProperty 函数 (JavaScript)
- Object.defineProperty 函数 (JavaScript)
- JavaScript中的Object.defineProperty 函数
- JavaScript Object.defineProperty()方法详解
- JavaScript学习 - Object.defineProperty()
- 【javascript】 Reflect.defineProperty() 与 Object.defineProperty() 【更新中】
- Javascript Object.defineProperty()
- 理解javascript的Object.defineProperty的作用
- javascript面向对象之Object.defineProperty(a,b,c)
- javascript面向对象属性函数用法(defineProperty与getOwnPropertyDescriptor)
- 【JavaScript】 Object.defineProperty
- javascript中的Object.defineProperty()与getOwnPropertyNames ()方法
- JavaScript使用Object.defineProperty方法实现双数据绑定
- Javascript Object.defineProperty() 创建一个不能被修改的对象的属性
- 浅谈vue实现数据监听的函数 Object.defineProperty
- how to use javascript Object.defineProperty?
- Object.defineProperty 函数
- javascript面向对象属性函数用法(defineProperty与getOwnPropertyDescriptor)