在 class 方法之外声明 class 属性

Question

查看 x 和 y 是如何在构造函数中声明的：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

有没有办法在函数外声明属性，例如：

class Point {
  // Declare static class property here
  // a: 22
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

所以我想将 a 分配给 22 但我不确定我是否可以在构造函数之外但仍然在 class..

Answer 1

在 ES6 中直接在 class 上初始化属性是 not possible，目前只能以这种方式声明方法。同样的规则也适用于 ES7。

但是，这是一个提议的功能，可能会在 ES7（目前处于第 3 阶段）之后出现。这里是official proposal。

此外，提案建议的语法是 slightly different（= 而不是 :）：

class Point {
  // Declare class property
  a = 22
  // Declare class static property
  static b = 33
}

如果您使用的是 Babel，则可以使用阶段 3 设置来启用此功能。

Here's a Babel REPL example

在 ES6 中，除了在构造函数中，另一种方法是在 class 定义之后执行此操作：

class Point {
  // ...
}

// Declare class property
Point.prototype.a = 22;

// Declare class static property
Point.b = 33;

这里 good SO Thread 更深入地探讨这个话题

注:

正如评论中提到的Bergi，建议语法：

class Point {
  // Declare class property
  a = 22
}

只是为这段代码提供快捷方式的语法糖：

class Point {
  constructor() {
    this.a = 22;
  }
}

其中两个语句都将属性分配给实例。

但是，这与分配给原型并不完全相同：

class Point {
  constructor() {
    this.a = 22;  // this becomes a property directly on the instance
  }
}

Point.prototype.b = 33; // this becomes a property on the prototype

两者仍可通过实例获得：

var point = new Point();
p.a // 22
p.b // 33

但是获得 b 需要沿着原型链向上移动，而 a 可以直接在对象上使用。

Answer 2

@nem035 说的对，在提案阶段

然而，@nem035 的建议是作为 class 实例成员实现它的一种方法。

// Declare static class property here

您似乎想要声明一个静态成员。如是， JavaScript 方法是

class Point {
  // ...
}
Point.a = '22';

您实际期望的方式可以在 TypeScript 中完成

class Point {
     static a = 22;
}

编译后的输出与上面的例子相同

Point.a = '22';

在 class 方法之外声明 class 属性

Declare a class property outside of a class method

javascript

ecmascript-6

class-fields