带箭头函数语法的 Getter

Question

是否有一种 JavaScript 语法可以让我更简洁地执行以下操作？

class MyClass {
    static get myProp() {
        return 1;
    }
}

这不是什么大问题，但我想知道是否有类似箭头函数的东西可以让我让它更精简一些，例如：

class MyClass {
    static get myProp = () => 1;
}

我知道我可以这样写（虽然不是安全的等价物）：

class MyClass {}
MyClass.myProp = 1;

或者这个更难阅读和更长的替代方案：

class MyClass {}
Object.define(MyClass, 'myProp', { get: () => 1; });

但这感觉像是滥用了class语法。

Answer 1

有一个更好的方法来做到这一点。 可以使用 Babel Preset 进行类转换。 获得此特定功能的预设是“preset-stage-2”。

preset-stage-2 的 babel 文档页面： https : //babeljs.io/docs/plugins/preset-stage-2/

用例：在您的.bablerc文件中。

{
  "presets": ["stage-2"]
}

注意：它是一个单独的 npm 模块，因此请事先安装它。

Answer 2

您不能使用箭头函数在类声明中定义类函数。 尝试这样做会产生语法错误。

以下代码：

 class MyClass { static get myVal() { console.log(this); return 1; } static get yourVal = () => { console.log(this); return 2; } }

产生这个错误：

{
  "message": "Uncaught SyntaxError: Unexpected token =",
  "filename": "https://stacksnippets.net/js",
  "lineno": 19,
  "colno": 22
}

而这段代码：

 class MyClass { dogs = (val) => { console.log('Bark, bark', val); } }

产生这个错误：

{
  "message": "Uncaught SyntaxError: Unexpected token =",
  "filename": "https://stacksnippets.net/js",
  "lineno": 14,
  "colno": 12
}

这段代码：

class MyClass {}
Object.define(MyClass, 'myProp', { get: () => 1; });

只是此代码的 ES5 版本：

class MyClass {
  static get myProp() { return 1; }
}

---

这段代码：

class MyClass {}
MyClass.myProp = 1;

Is 确实将myProp附加到类的原型，并且相当于静态变量。 但是这个值是可以改变的。 因此，如果您想要只读属性，那么您需要上述设置器之一。

在这段代码中：

 class MyClass { static get myVal() { return 1; } } MyClass.yourVal = 33; console.log(MyClass.myVal); console.log(MyClass.yourVal);

我们得到1和33的输出。 这是预期的