Object.defineProperty 函数 (JavaScript)

将属性添加到对象或修改现有属性的特性。
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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值