Object.defineProperty 函数 (JavaScript)

最新推荐文章于 2024-08-02 17:37:45 发布

rayi_27

最新推荐文章于 2024-08-02 17:37:45 发布

阅读量946

点赞数

分类专栏： node

node 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

转载：http://msdn.microsoft.com/zh-cn/library/dd548687(v=vs.94).aspx

将属性添加到对象或修改现有属性的特性。

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 行。

JavaScript

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

若要列出对象的属性，请将以下代码添加到该示例。

JavaScript

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 特性。其他数据属性的特性保持不变。

JavaScript

// 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 函数将访问器属性添加到用户定义的对象。

JavaScript

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

若要列出对象的属性，请将以下代码添加到该示例。

JavaScript

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 访问器定义。其他属性的特性保持不变。

JavaScript

// 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 元素。

JavaScript

// 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