Object.defineProperty() 详解

定义

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

语法

Object.defineProperty(obj, prop, descriptor)
1

参数

obj：要定义属性的对象。

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

descriptor：要定义或修改的属性描述符。

返回值：被传递给函数的对象。

例：

const obj1 = {};

Object.defineProperty(obj1, 'property1', {
  value: 22,
  writable: false
});

obj1.property1 = 33;

console.log(obj1.property1); // 22
1
2
3
4
5
6
7
8
9
10

注：默认情况下，使用 Object.defineProperty() 添加的属性值不可修改。

---

第三个参数：属性描述符

第三个参数：属性描述符 有两种主要形式：数据描述符 和 存取描述符。

• 数据描述符 是一个具有值的属性。
• 存取描述符 是由 getter 函数和 setter 函数所描述的属性。

（一个描述符只能是这两者其中之一，不能同时是两者。）

• 这两种描述符都是对象。它们都有以下可选键值：

  • configurable ：当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。 默认为 false。
  • enumerable ：当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。 默认为 false。

• 数据描述符 具有以下可选键值：

  • value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。 默认为 undefined。

  • writable：当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。 默认为 false。

• 存取描述符 具有以下可选键值：

  • get 属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。 默认为 undefined。

  • set 属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。 默认为 undefined。

创建属性

let obj2 = {}
// 给对象添加一个设置了数据描述符的属性
Object.defineProperty(obj2, "aa", {
    value: 22,
    writable: true,
    enumerable: true,
    configurable: true
})
console.log(obj2.aa) // 22

// 给对象添加一个设置了存取描述符的属性
let bbValue = 55
Object.defineProperty(obj2, "bb", {
    get() {
        return bbValue
    },
    set(newValue) {
        bbValue = newValue
    },
    enumerable: true,
    configurable: true
})
console.log(obj2.bb) // 55
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

修改属性

如果属性已经存在，Object.defineProperty() 将尝试根据描述符中的值以及对象当前的配置来修改这个属性。

• Writable 属性
  是数据描述符的键值，当 writable 属性设置为 false 时，该属性不可写。即不能被重新赋值。默认为 false。

  	let obj3 = {}
  	Object.defineProperty(obj3, 'aa', {
  	  value: 22,
  	  writable: false
  	})
  	obj3.aa = 33
  	console.log(obj3.aa) // 22
  1
  2
  3
  4
  5
  6
  7

• Enumerable 属性
  enumerable 定义了属性是否可以在 for…in 循环和 Object.keys() 中被枚举。默认为 false，不可枚举。

  var obj4 = { c: 3 };
  Object.defineProperty(obj4, "a", {
    value: 1,
    enumerable: true,
  });
  Object.defineProperty(obj4, "b", {
    value: 2,
    enumerable: false,
  });
  for (let i in obj4) {
    console.log(i);
  }
  // c
  // a
  console.log(Object.keys(obj4)); // [ 'c', 'a' ]
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

• Configurable 属性
  configurable 表示属性是否可以被删除，以及除 value 和 writable 外的其他特性是否可以被修改。默认为 false。

  let obj5 = {};
  Object.defineProperty(obj5, "aa", {
    get() {
      return 1;
    },
  configurable: false,
  });
  Object.defineProperty(obj5, "aa", {
    configurable: true,
  }); // 报错
  Object.defineProperty(obj5, "aa", {
    enumerable: true,
  }); // 报错
  Object.defineProperty(obj5, "aa", {
    set() {},
  }); // 报错
  delete obj5.aa // 报错
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17

使用点运算符和 Object.defineProperty() 为对象的属性赋值时，数据描述符中的属性默认值不同。

let obj6 = {};

// 点运算符为对象的属性赋值
obj6.aa = 22;
// 等同于
Object.defineProperty(obj6, "aa", {
  value: 22,
  writable: true,
  configurable: true,
  enumerable: true,
});

// Object.defineProperty() 为对象的属性赋值
Object.defineProperty(obj6, "bb", { value : 66 });
// 等同于：
Object.defineProperty(obj6, "bb", {
  value: 66,
  writable: false,
  configurable: false,
  enumerable: false
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21