Object.defineProperty()讲解

Posted 2023-05-04

参考技术A

javascript属性分为可枚举属性和不可枚举属性？什么是“枚举”，它又有什么用呢？

我们知道， for...in 语句以任意顺序遍历一个对象的 可枚举属性 。
既 stu.age 可枚举，stu.name 不可枚举，而他们是否可枚举是通过 enumerable 来设置的。

我们通常会直接创建对象，然后设置对象的属性，例如上面的 obj 对象，设置了 name ,price 属性。其实这些属性也有一定的限定的，这些限定属性性质的我们称为“属性描述符”。
这里拿 price 属性来说，我们能输出 fruit.price 等于 18 ，其实是通过 price 的描述符 value 来设置的。例如上面的stu.age 的设置；
price 也有“enumerable”描述符，他之所以能被 for in 到 ,是因为对自身添加属性的 “enumerable” 默认为 true。

除了上面说到过的 “value” 和 “enumerable” 还有什么描述符呢？

每个属性都有
Configurable描述符、Enumerable描述符、Writable描述符、Value描述符
或者，每个属性都有
Configurable描述符、Enumerable描述符、Get描述符、Set描述符
前者称为 数据描述符 ，他们的值决定了该js对象的属性的某些性质及是否可读写。
后者称为 读取描述符 ，他们的值决定了该js对象的属性的某些性质及读写的行为。

描述符必须是这两种形式之一，不能同时是两者。

那么这些属性是各代表着什么？
数据描述符具有以下键值

读取描述符具有以下键值

知道这些描述符所控制的性质，那又是什么时候去哪里设置的呢？这就关乎到Object.defineProperty() 了，它有三个参数，Object.defineProperty(obj, prop, descriptor)，其中descriptor就是设置属性性质描述符。

知道了Object.defineProperty()这个东东是用来生成或修改一个对象属性，知道对象属性的性质是靠descriptor这个参数来设置之后，我们来看看他是怎么运用的。
以 var person = 为例，我们要怎样去修改默认的属性值呢？

现在我们来修改下enumerable和writable值

我们试试吧configurable的值改为false

我们来模拟一个访问和设置的默认行为

什么,溢出了?这是为什么?
哦~原来是这么写的话会造成循环引用,狂call不止
我们看下流程:
person.a → get.call(person) → this.a → person.a → get.call(person) → this.a......
我们来修改下

这就是数据描述符和读取描述符的应用方式。在平时简单的开发中可能用不上，但是知道了这些之后对一些框架的封装的理解还是很有帮助的，例如vue数据双向绑定原理上利用的就是Object.defineProperty方法。

每个对象都有的一些方法：

Object.getOwnPropertyDescriptor 的应用：
一般直接添加属性时，属性描述符默认值都为 true，当用 Object.defineProperty() 方法来添加对象属性时，此时的属性描述符默认值为false
以文章开头的 apple 和 stu 的案例：

Object.create() 的第二个参数为 Object.defineProperties 的第二个参数，既设置属性及属性描述符， 详情移步到 Object.create()

参考资料：
1. MDN
3. 关于 Object.defineProperty() 小结

JavaScript Object.defineProperty()

Object.defineProperty()

标签（空格分隔）： JavaScript

---

原文地址
源码地址

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

一、语法

Object.defineProperty(obj, prop, descriptor)

1. 参数

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

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

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

2. 返回值

   被传递给函数的对象。

二、描述

改方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性（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);

三、示例

1. 创建属性

如果对象中不存在指定的属性，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只出现在访问符描述符中

1. 修改属性

如果属性已经存在，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