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

Posted 2023-02-22

【中文标题】Javascript ES6 - 在外部使用的类中的枚举，如静态枚举

【英文标题】：Javascript ES6 - Enums inside classes used outside like a static enum

【发布时间】：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 = … ;。然后你可以将它导入到其他文件中你需要的地方。

【参考方案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);

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