ES6类变量替代

一尘不染

ES6类变量替代

javascript

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

// ES 5
FrameWork.Class({

    variable: 'string',
    variable2: true,

    init: function(){

    },

    addItem: function(){

    }

});

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

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

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

我知道我可以this.myVar = true在constructor…但我不想“垃圾”我的构造，特别是当我有一个更大的类20-30 +参数。

我在考虑解决该问题的多种方法，但尚未找到任何好的方法。（例如：创建一个ClassConfig处理程序，并传递一个parameter与类分开声明的对象。然后该处理程序将附加到该类。我正在考虑WeakMaps通过某种方式进行集成。）

您将如何处理这种情况？

阅读 285

2020-04-25

共1个答案

一尘不染

更新：

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

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

varName = value

在类声明/表达式主体内部，它将定义一个变量。希望在几个月/几周内，我将能够发布更新。

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

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

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

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

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

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

但为什么？

好问题。TC39的好人希望类声明声明和定义类的功能。不是它的成员。ES6类声明为其用户定义其合同。

请记住，类定义定义了原型方法-在原型上定义变量通常不是您要做的事情。您当然可以使用：

constructor(){
    this.foo = bar
}

在像您建议的构造函数中。另请参见共识摘要。

ES7及更高版本

ES7 +属性初始化器

等等，给属性赋值似乎是定义类的必要方法！没错，但是，由于它是惯用语言，因此我们以这种方式设计了它。我们完全希望用于属性初始化的更具声明性的语法会在将来的JavaScript版本中出现。它可能看起来像这样：

// Future Version 
export class Counter extends React.Component { 
    static propTypes = { 
        initialCount: React.PropTypes.number
    }; 

    static defaultProps = {
        initialCount: 0
    }; 

    state = {
        count: this.props.initialCount
    }; 

    tick() {
        this.setState({
            count: this.state.count + 1 
        });
    }

    render() {
        return ( <div onClick={this.tick.bind(this)}> Clicks: { this.state.count } </div> ); 
    } 
}

2020-04-25