认识Object.defineProperty()

defineProperty

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

语法

Object.defineProperty(obj, prop, descriptor)

参数

- obj 要操作的对象
- prop 修改或新增的属性名称
- descriptor 属性描述符

属性描述符

描述符不能两者同时存在，只能是其中一个。

1. 数据描述符  数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。
2. 存取描述符  存取描述符是由 getter 函数和 setter 函数所描述的属性。

数据描述符 和 存取描述符 同时具有的键值：

`configurable`  当该属性的`configurable`为 `true` 时该属性的描述符改变，该属性可以从对象上删除。默认为 `false`。
`enumerable`    当且仅当该属性的 `enumerable` 键值为 true 时，该属性才会出现在对象的枚举属性中。

数据描述符

`value`     该属性对应的值。默认为 `undefined`
`writable`  当该属性的 `writable` 键值为 true 时，属性的值，也就是上面的 `value`，才能被赋值运算符改变。默认值为 `false`

示例

1
const people = {
2
  name:'Fireworks',
3
  age:18,
4
  gender: 'male'
5
};
6
7
Object.defineProperty(people, 'age', {
8
  value: 42,
9
  writable: true,
10
  configurable:true,
11
  enumerable:true
12
});
13
console.log(people);
14
// {name: "Fireworks", age: 42, gender: "male"}
15
people.age = 20;
16
console.log(people);
17
// {name: "Fireworks", age: 20, gender: "male"}
18
console.log(Object.keys(people));
19
// ["name", "age", "gender"]
20
delete people.age;
21
console.log(people);
22
// {name: "Fireworks", gender: "male"}
23
24
Object.defineProperty(people, 'age', {
25
  value: 5,
26
  writable: false,
27
  configurable:false,
28
  enumerable:false
29
});
30
31
console.log(people);
32
// {name: "Fireworks", gender: "male", age: 5}
33
people.age = 20;
34
console.log(people);
35
// {name: "Fireworks", gender: "male", age: 5}
36
console.log(Object.keys(people));
37
// ["name", "gender"]
38
delete people.age;
39
console.log(people);
40
// {name: "Fireworks", gender: "male", age: 5}

存取描述符

`get`    属性的 `getter` 函数，如果没有 `getter`，则为 `undefined`。当访问该属性时，会调用此函数。该函数的返回值会被用作属性的值。默认为 `undefined`。
`set`    属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。默认为 `undefined`。

示例

1
const people = {};
2
3
var name = "Jack";
4
5
Object.defineProperty(people, "name", {
6
  get: function () {
7
    console.log("执行 get 操作");
8
    return name;
9
  },
10
  set: function (value) {
11
    console.log("执行 set 操作");
12
    name = value;
13
  },
14
  enumerable: true,
15
  configurable: true
16
});
17
18
console.log(people.name);
19
// Jack
20
name = "Fireworks";
21
console.log(people.name);
22
// Fireworks
23
people.name = "mile";
24
console.log(people.name);
25
// mile
26
console.log(name);
27
// mile

MDN参考

JavaScript
Object

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！