在 ECMAScript 2017（ES8）中，Object.getOwnPropertyDescriptors() 方法被引入到了标准中。该方法主要用于返回一个对象的所有属性的描述符。该方法的使用不仅能够更好地帮助开发者深入了解JavaScript对象的构成和属性定义，还可以更加方便地进行对象克隆、属性合并、以及属性挂载操作等。
下面将深度解析该方法的应用以及在实际的开发中，如何正确应用该方法。
语法
以下是Object.getOwnPropertyDescriptors()方法的语法：
Object.getOwnPropertyDescriptors(obj)
参数
obj：必需。需要获取其属性描述符的对象。
返回值
Object.getOwnPropertyDescriptors()方法返回一个包含对象上所有属性描述符的对象。
属性描述符
在深入解析该方法之前，我们先来了解一下属性描述符。在JavaScript中，有两种类型的属性描述符: 数据描述符和访问器描述符。
数据描述符
数据描述符使用数据值定义属性。数据描述符具有以下可选键值：
value： 包含属性对应的值。默认值为 undefined。writable： 表示属性能否被赋值运算符修改。默认值为 false。enumerable： 表示是否可以通过 for...in 循环或 Object.keys() 取得属性。默认值为 false。configurable： 表示是否可以通过 delete 删除属性或者修改属性描述符。默认值为 false。
访问器描述符
访问器描述符使用getter和setter函数定义属性。访问器描述符具有以下可选键值：
get： 一个可访问属性的getter函数，如果没有 getter 则为 undefined。默认值为 undefined。set： 一个可访问属性的setter函数，如果没有 setter 则为 undefined。默认值为 undefined。enumerable： 表示是否可以通过 for...in 循环或 Object.keys() 取得属性。默认值为 false。configurable： 表示是否可以通过 delete 删除属性或者修改属性描述符。默认值为 false。
Object.getOwnPropertyDescriptors() 方法详解
Object.getOwnPropertyDescriptors() 方法是 ES8 新增加的方法之一，该方法主要用于返回一个对象所有属性的描述符。这些描述符包括数据属性和访问器属性的所有属性描述符。在实际开发中，我们通常会对对象进行属性合并，对象克隆，属性挂载等操作，此时 Object.getOwnPropertyDescriptors() 方法会给我们带来非常方便的帮助。
下面我们用一些示例代码来深入了解 Object.getOwnPropertyDescriptors() 方法。
示例1：获取对象属性描述符
下面示例代码中，我们将使用 Object.getOwnPropertyDescriptors() 方法来获取一个对象的所有属性描述符，包括数据属性和访问器属性的所有属性描述符：
-- -------------------- ---- ------- -- ---- ----- ------ - - ----- ------- ---- --- --- ---------- - ------ ------------- ------------ - - -- ----- ----- ----- - ---------------------------------------- ------------------展开代码
输出结果：
-- -------------------- ---- ------- - ----- - ------ ------- --------- ----- ----------- ----- ------------- ---- -- ---- - ------ --- --------- ----- ----------- ----- ------------- ---- -- --------- - ---- ---------- --- ---------- ---- ---------- ----------- ----- ------------- ---- - -展开代码
可以看到，输出结果包括了对象 person 中定义的所有属性的描述符，包括数据属性和访问器属性的所有描述符。
示例2：属性拷贝
通过 Object.getOwnPropertyDescriptors() 方法获取到一个对象的所有属性描述符后，我们就可以使用这些描述符来进行属性拷贝的操作。下面示例代码演示了如何使用 Object.getOwnPropertyDescriptors() 来进行属性拷贝的操作：
-- -------------------- ---- ------- -- ---- ----- ------ - - ----- ------- ---- --- --- ---------- - ------ ------------- ------------ - - -- ------ ----- ------ - -- -- ------ ------------------------------- ----------------------------------------- -------------------展开代码
输出结果：
{ name: 'Lucy', age: 22, fullName: [Function: get fullName] }
可以看到，目标对象 target 中包含了源对象 person 中的所有属性。
示例3：属性合并
如前所述，我们也可以使用 Object.getOwnPropertyDescriptors() 来进行属性合并的操作。下面示例代码演示了如何使用 Object.getOwnPropertyDescriptors() 来进行属性合并的操作：
-- -------------------- ---- ------- -- ----- ----- ---- - - ----- ------ - -- ----- ----- ---- - - ---- -- - -- ------ ----- ------ - -- -- ---- ------------------------------- --------------------------------------- ------------------------------- --------------------------------------- -------------------展开代码
输出结果：
{ name: 'Lucy', age: 22 }
可以看到，在目标对象 target 上成功合并了对象A和对象B上的所有属性，包括数据属性和访问器属性的所有描述符。
示例4：属性挂载
在某些场景下，我们会需要为已有对象添加新的属性或者修改已有属性的属性描述符。此时，Object.getOwnPropertyDescriptors() 方法也可以帮我们实现属性挂载操作。下面示例代码演示了如何使用 Object.getOwnPropertyDescriptors() 来进行属性挂载的操作：
-- -------------------- ---- ------- -- ---- ----- ------ - - ----- ------ - -- --------- ----------------------------- ------- - --------- ----- -- ------------------------ -- ---- ----------- - ----- ------------------------ -- ---- --------------------------------------------------- -------- -- - ------ ------- --------- ------ ----------- ----- ------------- ---- - -- ------------------------------ ------------------------------- - ---- - ------ ---------- ----------- ---- - -- -------------------展开代码
输出结果：
Lucy Lucy { value: 'Lucy', writable: false, enumerable: true, configurable: true } { name: 'Lucy', job: 'teacher' }
可以看到，在第一个示例中，因为在 Object.defineProperty() 方法中将 writable 设置为了 false，所以 person.name 的值无法被修改。而在第二个示例中，使用 Object.defineProperties() 方法来为对象挂载属性，则不需要关心属性描述符是否导致了只读属性，属性的设置将会更加灵活。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c95fb1e46428fe9e0b6e4d
