箭头函数语法的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 语法。

- samanime

---

大多数情况下，当人们使用 static get myProp() { ... 时，他们并不需要只读属性。这只是将 MyClass.myProp = 1 提升到 constructor 之上的惯用方式（例如，在 AngularJS $inject 注释中很有用）。除了您列出的那些方法外，没有其他选择。显然不支持 static get myProp = () => 1，因为没有理由让它被分配给任何函数以外的东西。 - Estus Flask

“though not a safe equivalent” 的意思是什么？ - Bergi

@le_m：如果它是实验性的，那么它就不是ES7。ES7（ES2016）于去年发布。 - Felix Kling

@le_m：是的，仍然在计划中，目前处于第二阶段：https://github.com/tc39/proposals（公共类字段） :) 它可能会在明年进入规范中（这些提案很难预测）。 - Felix Kling

@samanime 如果我想的话，我也可以覆盖“真正的getter”，但不能使用简单赋值。但实际上，由于没有动态计算值，你根本不应该使用getter - 无论是带箭头函数还是不带。 - Bergi

Answer 1

有一种更好的方法来完成它。可以使用Babel Preset for class-transform来完成。 获取此特定功能的预设是“preset-stage-2”。

babel对于preset-stage-2的文档页面： https://babeljs.io/docs/plugins/preset-stage-2/ 用例： 在您的.bablerc文件中添加该预设。

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

注意：这是一个单独的npm模块，所以请先安装它。

- Bharat23

---

这是正确的方法。这是我一段时间前问过的一个问题，而我们实际上已经使用了这个方法好几个月了，尽管我们只是使用 transform-class-properties作为插件，没有使用预设，但是效果是一样的。 - samanime

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;

这段代码会将myProp附加到类的原型上，相当于静态变量。但是该值可以被更改。因此，如果您想要一个只读属性，则需要使用上述其中一个setter。

在这段代码中：

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

console.log(MyClass.myVal);
console.log(MyClass.yourVal);

我们得到了输出的1和33。这正是预期的结果。

- Intervalia

---

较新的语法之一允许在类中使用箭头函数，您只需要使用Babel转换即可实现。 - samanime

你在问题中没有提到使用Babel。我是在阐述ES6的规则。如果Babel违反了这些规则，那么它听起来就像是有问题的。我希望你不要因为我的回答符合真正的ES6规则而将其评分降低。 - Intervalia

尽管它尚未被接受，但它是一个正式的提案，并正在被接受（4个阶段中的第3个阶段）：https://github.com/tc39/proposal-class-fields。我没有明确指定ES级别，我只是要求语法。 - samanime

你使用了标签[tag:ecmascript-6]。 - Intervalia