JS `Object.getOwnPropertyDescriptors()` (ES2017)：获取所有属性描述符 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同学，早上好！今天咱们来聊聊一个在 JavaScript 里藏得比较深的宝藏函数：Object.getOwnPropertyDescriptors()。这哥们儿可是 ES2017 才加入的，所以有些同学可能还不太熟悉。别担心，今天咱们就把它扒个精光，看看它到底能干些啥。

一、什么是属性描述符？

在 JavaScript 里，对象的属性可不仅仅是简单的键值对。每个属性都有一组特性来描述它，这些特性就叫做属性描述符。属性描述符包含以下几个关键信息：

value: 属性的值，就是你通常看到的那个。
writable: 一个布尔值，决定了属性的值是否可以被修改。true 表示可以修改，false 表示只读。
enumerable: 一个布尔值，决定了属性是否可以在 for...in 循环和 Object.keys() 中被枚举出来。true 表示可以枚举，false 表示不可枚举。
configurable: 一个布尔值，决定了属性是否可以被删除，以及属性描述符是否可以被修改。true 表示可以删除和修改，false 表示都不能。

你可以把属性想象成一个房间，而属性描述符就是这个房间的装修细节：

特性	含义	对应房间装修细节
`value`	房间里放的东西 (比如床、沙发)	家具摆设
`writable`	能不能换房间里的东西 (比如换个新床)	家具是否固定
`enumerable`	房间是否对外开放参观 (比如在旅游景点)	是否允许游客进入
`configurable`	房间能不能被拆掉重建 (比如拆掉重盖)	房屋结构是否可变

二、Object.getOwnPropertyDescriptors() 的作用

Object.getOwnPropertyDescriptors(obj) 就像一个侦探，它能深入一个对象内部，把所有自身属性的描述符都抓出来，然后打包成一个新的对象返回给你。注意，它只抓自身属性，不包括从原型链上继承来的属性。

三、代码示例，眼见为实

咱们来写几个例子，看看这哥们儿怎么用：

const myObject = {
  name: "Alice",
  age: 30,
  city: "Wonderland"
};

const descriptors = Object.getOwnPropertyDescriptors(myObject);

console.log(descriptors);
/*
{
  name: {
    value: 'Alice',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: true,
    enumerable: true,
    configurable: true
  },
  city: {
    value: 'Wonderland',
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

看到了吗？Object.getOwnPropertyDescriptors() 返回了一个对象，这个对象的每个属性都是 myObject 对应属性的描述符。默认情况下，对象的属性都是 writable: true, enumerable: true, configurable: true。

四、控制属性的特性

好了，现在我们知道了怎么拿到属性描述符，那怎么控制它们呢？可以使用 Object.defineProperty() 和 Object.defineProperties()。

Object.defineProperty(obj, prop, descriptor): 定义或修改对象 obj 的属性 prop，使用 descriptor 来描述属性的特性。
Object.defineProperties(obj, descriptors): 一次性定义或修改对象 obj 的多个属性，descriptors 是一个对象，包含了多个属性的描述符。

咱们来修改一下上面 myObject 的属性：

Object.defineProperty(myObject, "age", {
  writable: false, // 年龄不允许修改
  enumerable: false, // 年龄不想被枚举
  configurable: false // 年龄不能被删除和修改描述符
});

const descriptors2 = Object.getOwnPropertyDescriptors(myObject);
console.log(descriptors2);

/*
{
  name: {
    value: 'Alice',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: false,
    enumerable: false,
    configurable: false
  },
  city: {
    value: 'Wonderland',
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

myObject.age = 31; // 尝试修改年龄
console.log(myObject.age); // 仍然是 30，因为 writable: false

for (let key in myObject) {
  console.log(key); // 只会输出 name 和 city，因为 age 的 enumerable: false
}

// 尝试删除 age 属性
delete myObject.age; // 删除失败，configurable: false
console.log(myObject.age); // 仍然是 30

看到了吗？通过 Object.defineProperty()，我们可以精细地控制属性的特性。

五、Object.assign() 的坑

Object.assign() 是一个常用的方法，用于将一个或多个源对象的所有可枚举属性复制到目标对象。但是，它只会复制属性的值，而不会复制属性的描述符！

const source = {
  name: "Bob",
  age: 40
};

Object.defineProperty(source, "age", {
  writable: false,
  enumerable: false,
  configurable: true
});

const target = {};
Object.assign(target, source);

console.log(target); // { name: 'Bob', age: 40 }  值被复制了
console.log(Object.getOwnPropertyDescriptors(target));
/*
{
  name: {
    value: 'Bob',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 40,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

可以看到，target 的 age 属性的描述符变成了默认值，writable: true, enumerable: true, configurable: true。

六、Object.getOwnPropertyDescriptors() 的妙用

那么，Object.getOwnPropertyDescriptors() 有什么用武之地呢？

完整复制对象： 如果你想完整地复制一个对象，包括它的属性描述符，可以使用 Object.defineProperties() 和 Object.getOwnPropertyDescriptors() 配合使用。

const source = {
  name: "Charlie",
  age: 50
};

Object.defineProperty(source, "age", {
  writable: false,
  enumerable: false,
  configurable: true
});

const target = Object.defineProperties({}, Object.getOwnPropertyDescriptors(source));

console.log(target); // { name: 'Charlie', age: 50 }
console.log(Object.getOwnPropertyDescriptors(target));
/*
{
  name: {
    value: 'Charlie',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 50,
    writable: false,
    enumerable: false,
    configurable: true
  }
}
*/

这样，target 就和 source 一模一样了，包括属性描述符。

创建只读对象： 你可以通过设置 writable: false 和 configurable: false 来创建一个只读对象，防止对象被修改。

const myObject = {
  name: "David",
  age: 60
};

const descriptors = Object.getOwnPropertyDescriptors(myObject);

for (let key in descriptors) {
  descriptors[key].writable = false;
  descriptors[key].configurable = false;
}

Object.defineProperties(myObject, descriptors);

myObject.name = "Eve"; // 尝试修改 name
console.log(myObject.name); // 仍然是 David，因为 writable: false

delete myObject.age; // 删除失败，configurable: false
console.log(myObject.age); // 仍然是 60

这样，myObject 就变成了一个只读对象，任何修改操作都会失败。

创建不可枚举的对象： 你可以通过设置 enumerable: false 来创建一个不可枚举的对象，防止对象被 for...in 循环和 Object.keys() 枚举出来。这在某些场景下，比如隐藏内部状态，非常有用。

const myObject = {
  name: "Frank",
  _internalState: "secret" // 下划线开头的属性通常表示内部状态
};

Object.defineProperty(myObject, "_internalState", {
  enumerable: false
});

for (let key in myObject) {
  console.log(key); // 只会输出 name，因为 _internalState 的 enumerable: false
}

console.log(Object.keys(myObject)); // ['name']

保护你的代码： 在一些框架或者库的开发中，你可能需要确保某些属性不能被外部修改或删除。Object.defineProperty() 和 Object.getOwnPropertyDescriptors() 可以帮助你实现这一点。

七、与 Object.getOwnPropertyDescriptor() 的区别

别把 Object.getOwnPropertyDescriptors() 和 Object.getOwnPropertyDescriptor() 搞混了。

Object.getOwnPropertyDescriptor(obj, prop): 只获取对象 obj 的一个属性 prop 的描述符。
Object.getOwnPropertyDescriptors(obj): 获取对象 obj 的所有自身属性的描述符。

八、兼容性

Object.getOwnPropertyDescriptors() 是 ES2017 的新特性，所以一些老旧的浏览器可能不支持。如果你需要兼容老旧浏览器，可以使用 polyfill。

九、总结

Object.getOwnPropertyDescriptors() 是一个强大的工具，可以帮助你深入了解和控制对象的属性特性。掌握了它，你就可以更加灵活地处理对象，编写更健壮的代码。

总而言之，Object.getOwnPropertyDescriptors() 就像一个对象的X光机，让你看清楚每个属性的内部结构。使用它，你可以精确地控制对象的行为，避免一些潜在的bug。

希望今天的讲解对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复