`

Object.defineProperties 函数

 
阅读更多

转自https://msdn.microsoft.com/library/ff800817(v=vs.94).aspx

 

将一个或多个属性添加到对象,并/或修改现有属性的特性。

 
 
object.defineProperties(object, descriptors)
参数 
 
 
object

必需。 对其添加或修改属性的对象。 这可以是本机 JavaScript 对象或 DOM 对象。

descriptors

必需。 包含一个或多个描述符对象的 JavaScript 对象。 每个描述符对象描述一个数据属性或访问器属性。

返回值 
 
 

已传递给函数的对象。

备注 
 
 

descriptors 参数是一个包含一个或多个描述符对象的对象。

数据属性是可储存和检索值的属性。 数据属性描述符包含一个 value 特性和/或一个 writable 特性。 有关更多信息,请参见数据属性和访问器属性

一旦设置或检索属性值,访问器属性就会调用用户提供的函数。 访问器属性描述符包含 set 特性和/或 get 特性。

如果对象已包含一个带指定名称的属性,则修改该属性的特性。 有关更多信息,请参见Object.defineProperty 函数 (JavaScript)

若要创建一个对象并向新对象添加属性,则可使用 Object.create 函数 (JavaScript)

在下面的示例中,Object.defineProperties 函数将数据属性和访问器属性添加到用户定义的对象。

该示例使用对象文本来创建具有 newDataProperty 和 newAccessorProperty 描述符对象的 descriptors 对象。

 
var newLine = "<br />";

var obj = {};
Object.defineProperties(obj, {
    newDataProperty: {
        value: 101,
        writable: true,
        enumerable: true,
        configurable: true
    },
    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 accessor property value.
obj.newAccessorProperty = 10;
document.write ("newAccessorProperty value: " + obj.newAccessorProperty + newLine);

// Output:
// in property set accessor
// in property get accessor
// newAccessorProperty value: 10

与前面的示例类似,下面的示例将动态添加属性而不是使用对象文本添加。

 
var newLine = "<br />";

// Create the descriptors object.
var descriptors = new Object();

// Add a data property descriptor to the descriptors object.
descriptors.newDataProperty = new Object();
descriptors.newDataProperty.value = 101;
descriptors.newDataProperty.writable = true;
descriptors.newDataProperty.enumerable = true;
descriptors.newDataProperty.configurable = true;

// Add an accessor property descriptor to the descriptors object.
descriptors.newAccessorProperty = new Object();
descriptors.newAccessorProperty.set = function (x) {
    document.write("in property set accessor" + newLine);
    this.newaccpropvalue = x;
};
descriptors.newAccessorProperty.get = function () {
    document.write("in property get accessor" + newLine);
    return this.newaccpropvalue;
};
descriptors.newAccessorProperty.enumerable = true;
descriptors.newAccessorProperty.configurable = true;

// Call the Object.defineProperties function.
var obj = new Object();
Object.defineProperties(obj, descriptors);

// Set the accessor property value.
obj.newAccessorProperty = 10;
document.write ("newAccessorProperty value: " + obj.newAccessorProperty + newLine);

// Output:
// in property set accessor
// in property get accessor
// newAccessorProperty value: 10

 

若要修改对象的属性特性,请添加以下代码。 Object.defineProperties 函数修改 newDataProperty 的 writable特性,并修改 newAccessorProperty 的 enumerable 特性。 它将 anotherDataProperty 添加进对象,因为该属性名不存在。

 
 
    Object.defineProperties(obj, {
        newDataProperty: { writable: false },
        newAccessorProperty: { enumerable: false },
        anotherDataProperty: { value: "abc" }
    });
要求 
 
 

在 Internet Explorer 9 标准、Internet Explorer 10 标准和 Windows 8.x 应用商店 app 中受支持。 仅在 DOM 对象的 Internet Explorer 8 中受支持,否则不受支持。

 

 

其中数据属性和访问器属性。为

数据属性和访问器属性

 

本节包括您可能需要的有关数据属性和访问器属性的所有信息。

Hh965578.collapse_all(zh-cn,VS.94).gif数据属性

数据属性 是可获取和设置值的属性。 数据属性将 value 和 writable 属性包含在其描述符中。

下表列出了数据属性描述符的特性。

 

数据描述符特性

说明

默认

value

属性的当前值。

undefined

writable

true 或 false。 如果 writable 设置为 true,则可以修改属性值。

false

enumerable

true 或 false。 如果 enumerable 设置为 true,则可以由 for…in 语句枚举属性。

false

configurable

true 或 false。 如果 configurable 设置为 true,则可以更改属性的特性且可以删除属性。

false

如果描述符没有 valuewritableget 或 set 特性且指定的属性名不存在,则会添加数据属性。

在 configurable 特性为 false 且 writable 为 true 时,可以更改 value 和 writable 特性。

Hh965578.collapse_all(zh-cn,VS.94).gif在未使用 defineProperty 的情况下添加的数据属性

如果您在未使用 Object.definePropertyObject.defineProperties 或 Object.create 函数的情况下添加数据属性,则 writableenumerable 和 configurable 特性都将设置为 true。 在添加属性后,可以使用Object.defineProperty 函数修改属性。

可以使用以下方式来添加数据属性:

  • 赋值运算符 (=),如下所示:obj.color = "white";

  • 对象文本,如下所示:obj = { color: "white", height: 5 };

  • 构造函数,如使用构造函数定义类型中所述

Hh965578.collapse_all(zh-cn,VS.94).gif访问器属性

只要设置或检索属性值,访问器属性 就会调用用户提供的函数。 访问器属性的描述符包含 get 特性和/或 set 属性。

下表列出了访问器属性描述符的特性。

 

访问器描述符特性

说明

默认

get

返回属性值的函数。 此函数没有参数。

undefined

set

设置属性值的函数。 它具有一个包含要分配的值的参数。

undefined

enumerable

true 或 false。 如果 enumerable 设置为 true,则可以由 for…in 语句枚举属性。

false

configurable

true 或 false。 如果 configurable 设置为 true,则可以更改属性的特性且可以删除属性。

false

在未定义 get 访问器时,如果尝试访问属性值,则将返回 undefined 值。 在未定义 set 访问器时,如果尝试向访问器属性赋值,则什么也不会发生。

Hh965578.collapse_all(zh-cn,VS.94).gif属性修改

如果对象已包含一个带指定名称的属性,则会修改该属性的特性。 在修改属性时,描述符中未指定的特性保持不变。

如果现有属性的 configurable 特性为 false,则唯一允许的修改是将 writable 特性从 true 更改为 false

可以将数据属性更改为访问器属性,反之亦然。 如果这样做,描述符中未指定的 configurable 和 enumerable 特性将保留在属性中。 描述符中未指定的其他特性将设置为其默认值。

可以通过多次调用 Object.defineProperty 函数以增量方式定义可配置的访问器属性。 例如,一次Object.defineProperty 调用可能仅定义一个 get 访问器。 稍后调用同一属性名称可能会定义一个 set 访问器。 之后,该属性将同时具有 get 访问器和 set 访问器。

若要获取适用于现有属性的描述符对象,可以使用 Object.getOwnPropertyDescriptor 函数 (JavaScript)

可以使用 Object.seal 函数 (JavaScript)和 Object.freeze 函数 (JavaScript)来阻止修改属性的特性。

分享到:
评论

相关推荐

    JavaScript中常用函数方法对象篇.docx

    Object.defineProperties() 方法用于定义或修改对象的多个属性描述符。它接受两个参数,第一个参数是要定义或修改的对象,第二个参数是一个对象,其中每个属性名对应的值是一个属性描述符对象。 Object.is() Object...

    浅谈vue实现数据监听的函数 Object.defineProperty

    在 ES5中新增了不少新的API, 例如 新增了 Object.xxx相关的方法,其中有一个定义属性相关的 Object.defineProperty 这个方法(还有Object.defineProperties)这个方法是 vue框架实现数据监听的核心方法,它的定义如下: ...

    js代码-手写Object.create

    这通常涉及`Object.defineProperty`或`Object.defineProperties`方法: ```javascript function createObject(proto, propertiesObject) { function F() {} // 创建临时构造函数 F.prototype = proto; // 设置...

    如何使用JavaScript-使用defineProperty()和defineProperties()

    在构造函数模式中,`Object.defineProperty()` 和 `Object.defineProperties()` 可用于创建私有属性和方法,防止外部直接访问或修改。例如,我们可以创建一个具有私有计数器的类: ```javascript function Counter...

    javascript设计模式Constructor(构造器)模式.docx

    当需要同时定义多个属性时,可以使用`Object.defineProperties`: ```javascript Object.defineProperties(newObj, { "someKey": { value: "HelloJs", writable: true }, "anotherKey": { value: "Foobar", ...

    javascript中Object使用详解

    2. **Object.defineProperties(obj, properties)**:此方法可以在一个对象上定义新的属性或修改现有属性,并返回该对象。它接受两个参数,第一个是要修改的对象,第二个是一个包含属性描述符的属性名映射对象。 3. ...

    JavaScript 面向对象编程

    Object.defineProperties(chenhao, { 'email': { value: 'haoel@hotmail.com', writable: true, configurable: true, enumerable: true }, 'website': { value: 'http://coolshell.cn', writable: true, ...

    深入理解JavaScript系列(42):设计模式之原型模式详解

    对于不想使用Object.create方法实现原型模式的开发者,JavaScript还提供了Object.defineProperties和Object.defineProperty这两种方法来定义对象的属性。Object.defineProperties方法可以一次性定义多个属性,而...

    Ecma-262(ECMAScript5.1中文版+英文版)

    同时,新增了`Object.create()`用于创建具有指定原型的对象,以及`Object.defineProperty()`和`Object.defineProperties()`来直接定义对象的属性。 2. **函数增强**:引入了函数的`length`属性,它返回函数的参数个...

    浅谈JS对象添加getter与setter的5种方法

    第四种方法是通过使用`Object.defineProperty`或`Object.defineProperties`方法直接在对象上添加或修改属性的getter和setter。这两个方法都接受两个参数:对象本身和属性描述符对象。在属性描述符对象中,可以指定`...

    关于JavaScript中name的意义冲突示例介绍

    Object.defineProperties(per, { "nickName": { value: "Tom", writable: true }, "age": { value: 20, configurable: false, writable: false } }); var o = Object.getOwnPropertyDescriptor(per, "nickName"); ...

    浅谈Javascript数据属性与访问器属性

    使用Object.defineProperty()或Object.defineProperties()方法可以向对象添加新属性或修改现有属性的特性。 访问器属性则包含set、get、enumerable和configurable四个特性。set属性是一个函数,用来定义当属性值被...

    源程序代码1

    $jscomp.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(a,c,b){if(b.get||b.set)throw new TypeError("ES3 does not support getters and setters.");a!=Array....

    深入了解JavaScript中的Symbol的使用方法

    此外,`Object.defineProperty()`和`Object.defineProperties()`也可以用来为对象定义Symbol属性。 ### 获取Symbol属性 可以通过`Object.getOwnPropertySymbols()`方法获取一个对象的所有Symbol属性: ```...

    javascript设计模式Constructor(构造器)模式

    Object.defineProperties(newObj, { "someKey": {value: "Hello Js", writable: true}, "anotherKey": {value: "Foo bar", writable: false} }); ``` JavaScript虽然不支持传统的类,但提供了构造函数,通过在...

    js代码-继承内置类型

    在子类中,可以通过`Object.defineProperty()`或`Object.defineProperties()`来定义新的或重写已有的属性。 7. Symbol.hasInstance: 自定义构造函数可以通过`Symbol.hasInstance`来控制`instanceof`操作符的行为...

    你了解vue3.0响应式数据怎么实现吗

    7. defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)和Object.defineProperties(proxy, propDescs)。 8. preventExtensions(target):拦截Object....

    浅谈javascript的原型继承

    Object.defineProperties(object, properties); } return object; }; } ``` 总结一下,JavaScript的原型继承是通过对象的原型链来实现的,允许对象之间共享属性和方法。不同的库和框架如Ext、jQuery以及原生的`...

Global site tag (gtag.js) - Google Analytics