JavaScript中的getOwnPropertyDescriptors方法

One of the new feature from the ECMAScript 2017 specification for JavaScript is the getOwnPropertyDescriptors method. In a nutshell, this method returns the information for all properties of the given object including the information about getters and setters. It allow us to create copies of objects and clone it while copying all properties, including the getters and setters.

ECMAScript 2017规范JavaScript的新功能之一是getOwnPropertyDescriptors方法。 简而言之，此方法返回给定对象的所有属性的信息，包括有关getter和setter的信息。 它允许我们创建对象的副本并在复制所有属性(包括getter和setter)时克隆它。

In JavaScript, we can create special properties that behave as methods inside the object and behave as a property outside of it. They are called get and set.

在JavaScript中，我们可以创建特殊属性，这些属性充当对象内部的方法，并充当对象外部的属性。 它们称为get和set 。

// object with get and set properties

const gator = {
  name: 'Ben',
  type: 'reptilian',
  get fullName(){
    return `${this.name}${this.type}`;
  },
  set gatorName(name){
    this.name = name;
  }
};

If we do console.log(gator) we’ll get only the name and the type. Yet, we still have the access to the getter fullName, despite the fact it’s not visible in the console.

如果我们执行console.log(gator)我们将只获得名称和类型。 但是，尽管它在控制台中不可见，但我们仍然可以访问getter fullName。

console.log(gator)      // {name: 'Ben',  type: 'reptilian',}
console.log(gator.fullName) // 'Benreptilian'

Notice we call the getter like it was a usual property, not a method.

注意，我们将getter称为普通属性，而不是方法。

克隆对象 (Cloning Objects)

We use Object.assign() to clone objects in javaScript. If you’re not familiar with the Object.assign method, please read the article about how to manage objects in JavaScript. The main issue with this method is when we clone objects the result is not exactly as we’re expecting. The method is not working with getters and setters.

我们使用Object.assign()在javaScript中克隆对象。 如果您不熟悉Object.assign方法，请阅读有关如何在JavaScript中管理对象的文章 。 这种方法的主要问题是，当我们克隆对象时，结果与我们期望的并不完全相同。 该方法不适用于getter和setter。

const cayman = {Object.assign({}, gator};
console.log(cayman)         // {name: 'Ben',  type: 'reptilian', fullName: Benreptilian, gatorName: undefined }

So the getter and setter became usual values. And if getter is a countered value, the setter will be undefined.

因此，getter和setter成为常规值。 如果getter是一个计数器值，则setter将是未定义的。

Let’s clone the object with the getOwnPropertyDescriptors method instead.

让我们使用getOwnPropertyDescriptors方法克隆对象。

const crocodilian = Object.defineProperties({}, Object.getOwnPropertyDescriptors(gator)));

And now let’s compare the descriptors of each object we have:

现在让我们比较一下我们拥有的每个对象的描述符：

console.log(Object.getOwnPropertyDescriptors(gator));

/*  name: {value:'Ben', writable: true, enumerable: true, configurable: true},
    type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
    fullName: {get: f, set: undefined, enumerable: '', configurable: ''},
    gatorName: {get: undefined, set: f, enumerable: '', configurable: ''},        
*/

console.log(Object.getOwnPropertyDescriptors(cayman));

/*  name: {value:'Ben', writable: true, enumerable: true, configurable: true},
    type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
    fullName: {value: 'Benreptilian', writable: true, enumerable: '', configurable: ''},
    gatorName: {value: undefined, writable: true, enumerable: '', configurable: ''},        
*/

console.log(Object.getOwnPropertyDescriptors(crocodilian));

/*  name: {value:'Ben', writable: true, enumerable: true, configurable: true},
    type: {value:'reptilian', writable: true, enumerable: true, configurable: true},
    fullName: {get: f, set: undefined, enumerable: '', configurable: ''},
    gatorName: {get: undefined, set: f, enumerable: '', configurable: ''},        

*/

gator’s object properties name and type are defined as usual properties, but fullName and gatorName are defined as getter and setter. They have no value field, but have get and set fields. cayman’s object getter and setter are described now as usual values. And with the crocodilian object we manage to save its getters and setters, thanks to getOwnPropertyDescriptors.

gator的对象属性name和type定义为常规属性，而fullName和gatorName定义为getter和setter。 他们没有value字段，但是有get和set字段。 cayman的对象获取器和设置器现在作为常规值进行描述。 通过使用getOwnPropertyDescriptors ，我们可以使用crocodilian对象保存其getter和setter。

The getOwnPropertyDescriptors method helps to avoid data loss and with it we can create deep copies of objects without relying on another utility function.

getOwnPropertyDescriptors方法有助于避免数据丢失，有了它，我们可以创建对象的深层副本，而无需依赖其他实用程序功能。

翻译自: https://www.digitalocean.com/community/tutorials/js-getownpropertydescriptors