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
时间: 2024-10-01 04:26:31

Object.defineProperty 函数 (JavaScript)的相关文章

Object.keys 函数 (JavaScript)

Object.keys 函数 (JavaScript) 返回对象的可枚举属性和方法的名称. 在实际开发中,我们有时需要知道对象的所有属性,原生js给我们提供了一个很好的方法:Object.keys(),该方法返回一个数组 传入对象,返回属性名 var obj = {'a':'123','b':'345'}; console.log(Object.keys(obj)); //['a','b'] var obj1 = { 100: "a", 2: "b", 7: &qu

理解Object.defineProperty函数中的get与set

defineProperty是什么: 该函数可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象.通俗理解就是: 给对象添加一个新的属性,或者针对对象里的某些属性,可以给这个属性设置一些特性,比如是否只读,是否可以被for..in或Object.keys()遍历等 语法: Object.defineProperty(obj, prop, descriptor) 例如: var obj = {}; Object.defineProperty(obj, "key"

Object.create函数

语法 Object.create(prototype, descriptors) 参数 prototype 必需.  要用作原型的对象.  可以为 null. descriptors 可选.  包含一个或多个属性描述符的 JavaScript 对象. "数据属性"是可获取且可设置值的属性.  数据属性描述符包含 value 特性,以及 writable.enumerable 和 configurable 特性.  如果未指定最后三个特性,则它们默认为 false.  只要检索或设置该值

JavaScript Object.defineProperty()方法详解

Object.defineProperty() Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop, descriptor) 1 参数 obj 需要定义属性的对象. prop 需被定义或修改的属性名. descriptor 需被定义或修改的属性的描述符. 描述 该方法允许精确添加或修改对象的属性.一般情况下,我们为对象添加属性是通过赋值来创建并显示

Javascript Object.defineProperty()

转载声明: 本文标题:Javascript Object.defineProperty() 本文链接:http://www.zuojj.com/archives/994.html,转载请注明转自Benjamin-专注前端开发和用户体验 Javascript作为一种语言,有个美誉,开发者可以重新定义任何事情.虽然这在过去的一些javascript可以,但是ECMAScript5中已经开始得到改变,例如,我们可以使用Object.defineProperty创建一个不能被修改的对象的属性.本文中我们

javascript之Object.defineProperty的奥妙

直切主题 今天遇到一个这样的功能: 写一个函数,该函数传递两个参数,第一个参数为返回对象的总数据量,第二个参数为初始化对象的数据.如: var o = obj (4, {name: 'xu', age: 21}) // 返回了一个能容纳4条数据的对象,初始数据为name:'xu'和age: 21 返回的该对象总会有以下属性:overLength(数据容纳量).size(当前数据条数) 返回的对象应该有以下方法:cache(保存一条数据).delete(删除一条数据) 每一次引用某属性后,该属性值

JavaScript使用Object.defineProperty方法实现双数据绑定

Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 Object.defineProperty接收三个参数 *  目标对象 *  需要要定义的属性名或方法的名字 *  目标属性所拥有的特性 - descriptor (之后讲解下面案例不包括) 代码实例 var User = {}; Object.defineProperty(User, 'info',

[Effective JavaScript 笔记]第31条:使用Object.getPrototypeOf函数而不要使用__proto__属性

ES5引入Object.getPrototypeOf函数作为获取对象原型的标准API,但由于之前的很多js引擎使用了一个特殊的__proto__属性来达到相同的目的.但有些浏览器并不支持这个__proto__属性,所以并不是完全兼容的.例如对于拥有null原型的对象,不同的环境结果就不同了. var empty=Object.create(null); '__proto__' in empty;//一些环境会返回false,另一些会返回true 这就导致结果的不一致,从而影响到依赖这个判断的相关

object.getPrototypeOf函数(javascript)

返回对象的原型. 语法 Object.getPrototypeOf(object) 参数 object 必需.引用原型的对象. 返回值 object 参数的原型.原型也是对象. 异常 如果 object 参数不是对象,则将引发 TypeError 异常. function Pasta(grain, width) { this.grain = grain; this.width = width; } var spaghetti = new Pasta("wheat", 0.2); var