JavaScript Object.defineProperty()

Posted 2020-10-18 古宝只

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript Object.defineProperty()相关的知识，希望对你有一定的参考价值。

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

以上是关于JavaScript Object.defineProperty()的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript介绍

javascript的题。

javascript JavaScript isset（）等效： - JavaScript

JavaScript 使用JavaScript更改CSS（JavaScript）

JavaScript之基础-1 JavaScript(概述基础语法)

前端基础-JavaScript的基本概述和语法