如何迭代ES6/2015类实例的属性

Syl*_*ain 5 javascript ecmascript-next

鉴于这两个类

class Foo{
  f1;

  get f2(){
    return "a";
  }
}

class Bar extends Foo {
  b1;

  get b2(){
    return "a";
  }
}

let bar = new Bar();
Run Code Online (Sandbox Code Playgroud)

什么代码会从bar实例中获取此属性列表?['f1', 'f2', 'b1', 'b2']

这是一个巴别样本


更新

这应该是@Marc C答案的一部分:

使用装饰器我可以轻松地将不可枚举的属性转换为可枚举的属性:

class Bar extends Foo {

  @enumerable()  
  get b2(){
    return "a";
  }

}
Run Code Online (Sandbox Code Playgroud)

这是装饰源:

function enumerable() {
  return function(target, key, descriptor) {
    if (descriptor) {
      descriptor.enumerable = true;
    }
  };
}
Run Code Online (Sandbox Code Playgroud)

这是一个巴别样本

Mik*_*uck 6

这不是在类中声明属性的有效语法.相反,在构造函数中声明它们.

class Foo {
  constructor() {
    this.f1 = undefined;
  }
}
Run Code Online (Sandbox Code Playgroud)

然后你可以使用它们Object.keys.

使用Babel中的实验性功能将允许您使用该语法声明属性,但必须声明它们的值.

class Foo {
  f1 = 0;
  ...
}
Run Code Online (Sandbox Code Playgroud)

至于访问getter,默认情况下getter是不可枚举的,不能使用Object.keys或任何类似的机制访问.但是,您可以使用创建可枚举的getter Object.defineProperty.

Object.defineProperty(bar, 'f2', {
  get() { 
    return "a"; 
  }
});
Run Code Online (Sandbox Code Playgroud)

如果您正在使用实验性ES7功能,则可以将类装饰器应用于类方法并获得相同的行为.请参阅此Babel示例.

class Foo {
  @enumerable()
  get b2() {
    return "a";
  }
}

function enumerable() {
  return function(target, key, descriptor) {
    if (descriptor) {
      descriptor.enumerable = true;
    }
  }
}
Run Code Online (Sandbox Code Playgroud)