javascript - ES6类变量替代(ES6 class variable alternatives)

Question

Currently in ES5 many of us are using the following pattern in frameworks to create classes and class variables, which is comfy:

(当前在ES5中，我们许多人在框架中使用以下模式来创建类和类变量，这很方便：)

// ES 5
FrameWork.Class({

    variable: 'string',
    variable2: true,

    init: function(){

    },

    addItem: function(){

    }

});

In ES6 you can create classes natively, but there is no option to have class variables:

(在ES6中，您可以本地创建类，但是没有选择可以使用类变量：)

// ES6
class MyClass {
    const MY_CONST = 'string'; // <-- this is not possible in ES6
    constructor(){
        this.MY_CONST;
    }
}

Sadly, the above won't work, as classes only can contain methods.

(可悲的是，上述方法不起作用，因为类只能包含方法。)

I understand that I can this.myVar = true in constructor …but I don't want to 'junk' my constructor, especially when I have 20-30+ params for a bigger class.

(我知道我可以在constructor this.myVar = true …但是我不想“垃圾”我的构造函数，尤其是当我有20-30个以上的大型类参数时。)

I was thinking of many ways to handle this issue, but haven't yet found any good ones.

(我正在考虑解决该问题的多种方法，但尚未找到任何好的方法。)

(For example: create a ClassConfig handler, and pass a parameter object, which is declared separately from the class. Then the handler would attach to the class. I was thinking about WeakMaps also to integrate, somehow.)

(（例如：创建一个ClassConfig处理程序，并传递一个与类分开声明的parameter对象。然后该处理程序将附加到该类上。我在考虑将WeakMaps也以某种方式进行集成。）)

What kind of ideas would you have to handle this situation?

(您将如何处理这种情况？)

  ask by wintercounter translate from so

Answer 1

2018 update:

(2018更新：)

There is now a stage 3 proposal - I am looking forward to make this answer obsolete in a few months.

(现在有第3阶段的提案-我期待在几个月后使这个答案过时。)

In the meantime anyone using TypeScript or babel can use the syntax:

(同时，使用TypeScript或babel的任何人都可以使用以下语法：)

varName = value

Inside a class declaration/expression body and it will define a variable.

(在类声明/表达式主体内，它将定义一个变量。)

Hopefully in a few months/weeks I'll be able to post an update.

(希望在几个月/几周内，我将能够发布更新。)

Update: Chrome 74 now ships with this syntax working.

(更新：Chrome 74现在附带此语法。)

---

The notes in the ES wiki for the proposal in ES6 ( maximally minimal classes ) note:

(ES Wiki中针对ES6中提案的注释（ 最大类别 ）注释：)

There is (intentionally) no direct declarative way to define either prototype data properties (other than methods) class properties, or instance property

(没有（有意地）没有直接的声明方式来定义原型数据属性（方法以外的类）或实例属性)

Class properties and prototype data properties need be created outside the declaration.

(类属性和原型数据属性需要在声明之外创建。)

Properties specified in a class definition are assigned the same attributes as if they appeared in an object literal.

(在类定义中指定的属性被赋予相同的属性，就像它们出现在对象文字中一样。)

This means that what you're asking for was considered, and explicitly decided against.

(这意味着您的要求已被考虑，并明确决定反对。)

but... why?(但为什么？)

Good question.

(好问题。)

The good people of TC39 want class declarations to declare and define the capabilities of a class.

(TC39的好人希望类声明声明和定义类的功能。)

Not its members.

(不是它的成员。)

An ES6 class declaration defines its contract for its user.

(ES6类声明为其用户定义其合同。)

Remember, a class definition defines prototype methods - defining variables on the prototype is generally not something you do.

(请记住，类定义定义了原型方法-在原型上定义变量通常不是您要做的事情。)

You can, of course use:

(您当然可以使用：)

constructor(){
    this.foo = bar
}

In the constructor like you suggested.

(在您建议的构造函数中。)

Also see the summary of the consensus .

(另请参见共识摘要 。)

ES7 and beyond(ES7及更高版本)

A new proposal for ES7 is being worked on that allows more concise instance variables through class declarations and expressions - https://esdiscuss.org/topic/es7-property-initializers

(对正在工作了ES7一项新的提案，通过类的声明和表达式可以更简洁的实例变量- https://esdiscuss.org/topic/es7-property-initializers)