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进行类转换。获得此特定功能的预设为“预设阶段2”。

预设阶段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;

是否将myProp附加到类的原型，并且相当于静态变量。但是这个价值可以改变。因此，如果您想要一个只读属性，那么您需要以上一个setter ..

在此代码中：

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

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

具有箭头函数语法的Getter

2 个答案: