Javascript ES6 - 在外部使用的类中的枚举，如静态枚举答案

【问题标题】：Javascript ES6 - Enums inside classes used outside like a static enumJavascript ES6 - 在外部使用的类中的枚举，如静态枚举
【发布时间】：2017-08-17 10:45:08
【问题描述】：

我想问一下是否可以添加类似的枚举：

STATES = {
    WIP: "Work in progress",
    ONLINE: "Online",
    ONLINE_MODIFIED: "Online, modified",
    HIDDEN: "Hidden"
}

在一个类中，并且能够在其他文件中使用它，类似于：object.updateState(Class.STATES.HIDDEN)，而无需构造一个新对象，如boxObject.updateState(new Box().STATES.HIDDEN)

谢谢。

【问题讨论】：

这是可能的，但你为什么要这样做呢？我会改用export const STATES = { … };。然后你可以将它导入到其他文件中你需要的地方。

标签： javascript class enums ecmascript-6 es6-class

【解决方案1】：

您可以通过多种方式实现静态数据属性：

使用赋值：

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {};

Box.STATES = STATES;
console.log(Box.STATES.WIP); // Work in progress is the output

使用 Object.defineProperty：

当您使用Object.defineProperty 时，您可以将其设为只读

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {};

Object.defineProperty(Box, 'STATES', {
  value: STATES,
  writable: false, // makes the property read-only
});

console.log(Box.STATES.WIP); // Work in progress is the output

使用静态 getter：

您可以使用 ES6 静态 getter 语法在类定义中添加属性。您也可以将其设为只读，也可以仅定义 getter。

const STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

class Box {
  static get STATES() {
    return STATES;
  }
}

console.log(Box.STATES.WIP); // Work in progress is the output

话虽如此，我同意n00dl3。如果您使用的是 ES6 模块，使用命名导出似乎更合适：

export const BOX_STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

export default class Box {};

所以你可以像这样导入它：

import { BOX_STATES } from './path-to-box';

console.log(BOX_STATES.WIP); // Work in progress is the output

【讨论】：

这里的 const 可能会产生误导。仍然可以在没有错误的情况下执行 BOX_STATES.WIP = 'Wewy impowtant pewson'，并更改“常量”的值。
上面第三个例子中的静态getter必须被类或者类构造函数访问，而不是类实例。要从实例中获取类，请使用构造函数：Box.constructor.STATES.WIP。 Mozilla doc on static 提供了更多示例。

【解决方案2】：

像这样：

export class Foo{}
Foo.SomeStaticEnum={BAR:"bar"};

但导出 const 似乎更合适...

export const FOO={BAR:"bar"};

【讨论】：

抱歉迟到了。问题发布后几分钟，您就解决了问题。因此，尽管下一个人的答案更详细，但您仍会得到复选标记。
为什么单独导出更好？
@h3dkandi 因为声明一个空类只是为了导出一个静态属性似乎有点过头了：你声明了两件事，而你只使用了一个。
如果枚举只和类一起使用呢？假设我有一个类 Beer 并且我有一个枚举 Beer.StandardBeers 并且你使用它可以说像这个新的 Beer(Beer.StandardBeers) 或 sth。
嗯，这是一个很大的话题，但最好不要在课堂上使用它，因为如果它是课堂的一部分，无论你是否使用它，它都会被导入 (import {myClass} from "x/y") .如果将其分开（import {myClass} from "x/y",import {myEnum} from "x/y"）并单独导入，如果启用 tree-shaking，则只能捆绑类或仅捆绑枚举，这将使您的捆绑大小增加几个字节.

【解决方案3】：

如果你不需要纯 ES6 并且可以使用 Typescript，请首选它。 Typescript 有一个不错的 ENUM 和导出选项

示例：

export enum STATES
{
        WIP = "Work in progress",
        ONLINE = "Online",
        ONLINE_MODIFIED = "Online, modified",
        HIDDEN = "Hidden"
}

export class SocialMedia
{
    static state: STATES = STATES.HIDDEN;
}


console.log(SocialMedia.state);
SocialMedia.state = STATES.WIP;
console.log(SocialMedia.state);

结果：

Hidden
Work in progress

【讨论】：

【解决方案4】：

另一种不需要类的简单方法

const BOX_STATES = {
  WIP: "Work in progress",
  ONLINE: "Online",
  ONLINE_MODIFIED: "Online, modified",
  HIDDEN: "Hidden"
};

module.exports = BOX_STATES;

console.log(BOX_STATES.WIP);

确保您导入或需要您的文件，如上所示。

【讨论】：