JavaScript Object.defineProperty()

标签(空格分隔): JavaScript

Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。

一、语法

Object.defineProperty(obj, prop, descriptor)

参数

obj 要在其上定义属性的对象。

prop 要定义或修改的属性的名称。

descriptor 将被定义或修改的属性描述符。

返回值

被传递给函数的对象。

二、描述

改方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性(for...in或Object.keys方法),这些值可以被改变,也可以被删除。这种发放允许这些额外的细节从默认值改变。默认情况下,使用Object.defineProperty()添加的属性值是不可变的。

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值是可写的,也可能不是可写的。访问器描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。

数据描述符和存取描述符均具有以下可选键值:

configurable 当且仅当该属性的configurable位true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为flase。

enumerable 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为false。

数据描述符同时具有以下可选键值:

value 该属性对应的值。可以是任何有效的js值(数值、对象、函数等)。默认为undefined。

writable 当且仅当该属性的writable为true时,该属性才能被赋值运算符改变。默认为false。

存取描述符同时具有以下可选键值:

get 一个给属性提供getter的方法,如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。

set 一个给属性提供setter的方法,如果没有setter则无undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为undefined。

这些选项不一定是自身属性,如果是继承来的也要考虑。为了确认保留这些默认值,你可能要在这之前冻结Object.prototype,明确指定所有的选项,或者将__proto__属性指向null。

// 使用 __proto__
var obj = {};
var descriptor = Object.create(null); // 没有继承的属性
// 默认没有 enumerable,没有 configurable,没有 writable
descriptor.value = 'static';
Object.defineProperty(obj, 'key', descriptor);

// 显示
Object.defineProperty(obj, 'key', {
    enumerable: false,
    configurable: false,
    writable: false,
    value: 'static'
});

// 循环使用同一对象
function withValue(value) {
    var d = withValue.d || (
        withValue.d = {
            enumerable: false,
            writable: false,
            configurable: false,
            value: null
        }
    );
    d.value = value;
    return d;
}

// ... 并且 ...
Object.defineProperty(obj, 'key', withValue('static'));

// 如果 freeze 可用,防止代码添加或删除对象原型的属性
// (value,get,set,enumerable,writable,configurable)
(Object.freeze || Object)(Object.prototype);
三、示例 创建属性

如果对象中不存在指定的属性,Object.defineProperty()就创建这个属性。当描述符中省略某些字段时,这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。

value,get和set字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”,并被“键入”为一个数据描述符。

var o = {}; // 创建一个新对象

// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, 'a', {
    value: 37,
    writable: true,
    enumerable: true,
    configurable: true
});

// 对象o拥有了属性a,值为37

// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(o, 'b', {
    get: function () {
        return bValue;
    },
    set: function (v) {
        bValue = v;
    },
    enumerable: true,
    configurable: true
});

o.b = 38;
// 对象b拥有了属性b,值为38

// o.b的值现在总是与bValue相同,除非重新定义o.b

// 数据描述符和存取描述符混合使用
Object.defineProperty(o, 'conflict', {
    value: 0x9f91102,
    get: function () {
        return 0xdeadbeef;
    }
});
// 抛出错误: value appears only in data descriptors, get appears only in accessor descriptors
// value只出现在数据描述符中,get只出现在访问符描述符中
修改属性

如果属性已经存在,Object.defineProperty()将尝试根据描述符中的值以及对象当前的配置来修改这个属性。如果旧描述符将其configurable属性设置为false,则该属性被认为是“不可配置的”,并且没有属性可以背改变(除了单向改变writable为false)。当属性不可配置时,不能在数据和访问器属性类型之间切换。

当视图改变不可配置属性(除了writable属性之外)的值时会抛出{jsxref("TypeError")}},除非当前值和新值相同。

Writable属性

当writable属性设置为false时,该属性被称为“不可写”。它不能被重新分配。

// Writable 属性
var ob = {}; // Create a new object

Object.defineProperty(ob, 'a', {
    value: 37,
    writable: false
});

console.log(ob.a); // 37
ob.a = 25; // 没有错误抛出
console.log(ob.a); // 37

// strict mode 严格模式
(function () {
    'use strict';
    var o = {};
    Object.defineProperty(o, 'b', {
        value: 2,
        writable: false
    });
    o.b = 3; // 抛出类型错误:'b' is read-only
    return o.b; // 返回2没有上面的行
})();

Enumerable特性

enumerable定义了对象的属性是否可以在for...in循环和Object.keys()中被枚举。

var o2 = {};
Object.defineProperty(o2, 'a', { value: 1, enumerable: true });
Object.defineProperty(o2, 'b', { value: 2, enumerable: false });
Object.defineProperty(o2, 'c', { value: 3 }); // emumerable默认为false
o2.d = 4; // 如果直接赋值创建对象的属性 默认为true

for (var i in o2) {
    console.log(i);
    // 打印 'a' 'd'
}

var o2a = o2.propertyIsEnumerable('a'); // true
var o2b = o2.propertyIsEnumerable('b'); // false
var o2c = o2.propertyIsEnumerable('c'); // false
console.log(o2a, o2b, o2c);

Configurable特性

configurable特性表示对象的属性是否可以背删除,以及除writable特性外的其它特性是否可以被修改。

var o3 = {};
Object.defineProperty(o3, 'a', {
    get: function () { return 1; },
    configurable: false
});

Object.defineProperty(o3, 'a', {
    configurable: true
});
// Uncaught TypeError: Cannot redefine property: a

Object.defineProperty(o3, 'a', {
    enumerable: true
});
// Uncaught TypeError: Cannot redefine property: a

Object.defineProperty(o3, 'a', {
    set: function (v) { }
});
// Uncaught TypeError: Cannot redefine property: a

Object.defineProperty(o3, 'a', {
    get: function () { return 1; }
});
// Uncaught TypeError: Cannot redefine property: a

Object.defineProperty(o3, 'a', {
    value: 12
});
// Uncaught TypeError: Cannot redefine property: a

Object.defineProperty(o3, 'a', {
    writable: true
});
// Uncaught TypeError: Cannot redefine property: a

console.log(o3.a); // 1
delete o3.a;
console.log(o3.a); // 1

如果o.a的configurable属性为true,则不会抛出任何错误,并且该属性将在最后被删除。

添加多个属性和默认值

考虑特性被赋予的默认特性值非常重要,通常使用点运算符和Object.defineProperty()为对象的属性赋值时。数据描述符中的属性默认值是不同的,如下例所示。

var o4 = {};

o4.a = 1;
// 等同于:
Object.defineProperty(o4, 'a', {
    value: 1,
    writable: true,
    configurable: true,
    enumerable: true
});

// 另一方面
Object.defineProperty(o4, 'b', { value: 1 });
// 等同于
Object.defineProperty(o, 'b', {
    value: 1,
    writable: false,
    configurable: false,
    enumerable: false
});

一般的Setters和getters

下面的例子展示了如何实现一个自存档对象。当设置temperature属性时,archive数组会获取日志条目。

function Archiver() {
    var temperature = null;
    var archive = [];
    
    Object.defineProperty(this, 'temperature', {
        get: function () {
            console.log('get...');
            return temperature;
        },
        set: function (v) {
            temperature = v;
            archive.push({ val: temperature });
        }
    });
    
    this.getArchive = function () {
        console.log(archive);
        return archive;
    }
}

var arc = new Archiver();
arc.temperature; // get...
arc.temperature = 11;
arc.temperature = 12;
arc.getArchive(); // [{ val: 11 }, { val: 12 }]
var pattern = {
    get: function () {
        return 'I alway return this string, whatever u have assigned.';
    },
    set: function () {
        this.myname = 'This is my name string.';
    }
};

function TestDefineSetAndGet() {
    Object.defineProperty(this, 'myproperty', pattern);
}

var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';

console.log(instance.myproperty); // I alway return this string, whatever u have assigned.
console.log(instance.myname); // This is my name string.
四、兼容性

desktop

Chrome Edge Firefox IE Opera Safari 5 Yes 4 9+ 11.6 5.12

mobile

Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari Yes Yes Yes 4 Yes 11.5 Yes

重定义数组对象的 length 属性

只在Internet Explorer 9及以后版本和Firefox 23及以后版本中,才完整地正确地支持数组对象length属性的重新定义。目前不要依赖于重定义数组length 属性能够起作用,或在特定情形下起作用。与此同时,即使你能够依赖于它,你也。

Internet Explorer 8 具体案例

Internet Explorer 8 实现了 Object.defineProperty() 方法,但 只能在 DOM 对象上使用。 需要注意的一些事情:

尝试在原生对象上使用Object.defineProperty()会报错。 属性特性必须设置一些特定的值。对于数据属性描述符,configurable, enumerable, writable特性必须全部设置为true,对于访问器属性描述符,configurable必须设置为true,enumerable必须设置为false。任何视图提供其他值将导致一个错误抛出。 重新配置一个属性首先需要删除该属性。如果属性没有删除,就如同重新配置前的尝试。

Last updated by: Jehorn, Dec 26, 2017, 09:59 AM

38人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册