Object.defineProperty 函數 (JavaScript)

將屬性添加到對象，或修改現有屬性的特性。

語法

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

修改 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