设置一个ES6类getter可枚举 [英] Setting an ES6 class getter to enumerable

问题描述

我有一个ES6类（用babeljs编译）和一个getter属性。我明白这些属性在默认情况下是不可枚举的。但是，我不明白为什么我无法使用 Object.defineProperty

  //声明类
 class Person {
 constructor（myName）{
 this.name = myName; 
} 
 
 get greeting（）{
 return`你好，我是$ {this.name}`; 
} 
} 
 
 //使枚举（不起作用）
 Object.defineProperty（Person，'greeting'，{enumerable：true}）; 
 
 //创建一个实例并获取枚举属性
 var person = new Person（'Billy'）; 
 var enumerableProperties = Object.keys（person）; 
 // => ['name'] 
  

Plunker示例

解决方案

ES6样式getter是在原型上定义的，而不是在每个人人。要将问候语属性设置为可枚举，您需要更改：

  / make枚举（不工作）
 Object.defineProperty（Person，'greeting'，{enumerable：true}）; 
  

To：

 code> // Make枚举
 Object.defineProperty（Person.prototype，'greeting'，{enumerable：true}）; 
  

Object.keys仅返回该对象 自己的 枚举属性，因此原型上的属性不会返回。您将在 Object.keys（Object.getPrototypeOf（person））中找到 greeting 属性，或在 for ... in 循环。 更新的Plunker

如果你想要每个人Person的实例有自己的 greeting 可以在构造函数中定义它：

  class Person {
 constructor（myName）{
 this.name = myName; 
 
 Object.defineProperty（this，'greeting'，{
 enumerable：true，
 get：function（）{return`Hello，I'm $ {this.name} `;} 
}）; 
} 
} 
  

更新的Plunker

I have an ES6 class (transcompiled with babeljs) with a getter property. I understand that these properties are not enumerable by default. However, I do not understand why I am not able to make the property enumerable using Object.defineProperty

// Declare class
class Person {
  constructor(myName) {
    this.name = myName;
  }

  get greeting() {
    return `Hello, I'm ${this.name}`;
  }
}

// Make enumerable (doesn't work)
Object.defineProperty(Person, 'greeting', {enumerable: true});

// Create an instance and get enumerable properties
var person = new Person('Billy');
var enumerableProperties = Object.keys(person);
// => ['name']

Plunker Example

解决方案

ES6 style getters are defined on the prototype, not on each individual person. To set the greeting property to enumerable you need to change:

// Make enumerable (doesn't work)
Object.defineProperty(Person, 'greeting', {enumerable: true});

To:

// Make enumerable
Object.defineProperty(Person.prototype, 'greeting', {enumerable: true});

Object.keys only returns that objects own enumerable properties, so properties on the prototype are not returned. You will find the greeting property in Object.keys( Object.getPrototypeOf( person ) ), or in a for...in loop. Updated Plunker

If instead, you want each individual instance of Person to have its own greeting you can define it in the constructor:

class Person {
  constructor(myName) {
    this.name = myName;

    Object.defineProperty( this, 'greeting', {
      enumerable: true,
      get: function ( ) { return `Hello, I'm ${this.name}`; }
    } );
  }
}

Updated Plunker

这篇关于设置一个ES6类getter可枚举的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！