JavaScript中对Object.defineProperty 函数的理解

谁借莪１个温暖的怀抱￠ 2022-06-13 13:13 209阅读 0赞

# Object.defineProperty 函数 (JavaScript) #

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

## 语法 ##

Object.defineProperty(object, propertyname, descriptor)

## 参数 ##

*object*

必需。  要在其上添加或修改属性的对象。  这可能是一个本机 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。

*propertyname*

必需。  一个包含属性名称的字符串。

*descriptor*

必需。  属性描述符。  它可以针对数据属性或访问器属性。

## 返回值 ##

已修改对象。

## 备注 ##

可使用 **Object.defineProperty** 函数来执行以下操作：

*  向对象添加新属性。  当对象不具有指定的属性名称时，发生此操作。  
 *  修改现有属性的特性。  当对象已具有指定的属性名称时，发成此操作。

描述符对象中会提供属性定义，用于描述数据属性或访问器属性的特性。  描述符对象是 **Object.defineProperty** 函数的参数。

若要向对象添加多个属性或修改多个现有属性，可使用 [Object.defineProperties 函数 (JavaScript)][Object.defineProperties _ _JavaScript]。

## 异常 ##

如果以下任一条件为 true，则引发 **TypeError** 异常：

*  *object* 参数不是对象。
 *  此对象不[可扩展][Link 1]且指定的属性名称不存在。
 *  *descriptor* 具有 **value** 或 **writable** 特性，并且具有 **get** 或 **set** 特性。
 *  *descriptor* 具有 **get** 或 **set** 特性，上述特性不是函数且已定义。
 *  指定的属性名称已存在，现有属性具有 **false** 的 **configurable** 特性，且 *descriptor* 包含一个或多个与现有属性中特性不同的特性。  但是，当现有属性具有 **false** 的 **configurable** 特性和 **true** 的 **writable** 特性时，则允许 **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

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

JavaScript

## 修改访问器属性 ##

若要修改对象的访问器属性，请将以下代码添加前面所示的代码。   *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

## 要求 ##

Internet Explorer 9 标准模式、Internet Explorer 10 标准模式以及 Windows 8.x 应用商店 应用支持所有功能。

Internet Explorer 8 标准模式 支持 DOM 对象，但不支持用户定义的对象。  可以指定 **enumerable** 和 **configurable** 特性，但不使用它们。

## 另请参阅 ##

[文档对象模型原型，第 2 部分：访问器 (getter/setter) 支持][2 _ _getter_setter_]  
[Object.defineProperties 函数 (JavaScript)][Object.defineProperties _ _JavaScript]  
[Object.create 函数 (JavaScript)][Object.create _ _JavaScript]  
[Object.getOwnPropertyDescriptor 函数 (JavaScript)][Object.getOwnPropertyDescriptor _ _JavaScript]  
[Object.getOwnPropertyNames 函数 (JavaScript)][Object.getOwnPropertyNames _ _JavaScript]

[Object.defineProperties _ _JavaScript]: https://msdn.microsoft.com/zh-cn/library/ff800817%28v=vs.94%29.aspx
[Link 1]: https://msdn.microsoft.com/zh-cn/library/ff806188%28v=vs.94%29.aspx
[2 _ _getter_setter_]: https://msdn.microsoft.com/library/dd229916%28v=vs.85%29.aspx
[Object.create _ _JavaScript]: https://msdn.microsoft.com/zh-cn/library/ff925952%28v=vs.94%29.aspx
[Object.getOwnPropertyDescriptor _ _JavaScript]: https://msdn.microsoft.com/zh-cn/library/dd548686%28v=vs.94%29.aspx
[Object.getOwnPropertyNames _ _JavaScript]: https://msdn.microsoft.com/zh-cn/library/ff688126%28v=vs.94%29.aspx