用分号声明 class 属性时的奇怪行为

Question

class SomeClass {
  x: 5;
  y = 10;
}

const c = new SomeClass();
alert(c.x + ' : ' + c.y);

为什么代码可以编译，但c.x的值未定义？

用 : 声明 class 属性有什么效果？

Answer 1

关于 x: 5 部分，虽然这是一个有效的 javascript 代码，但没有太大用处。
这是一个 javascript label 并且它主要在循环上下文中使用（如果有的话）。

所以回答你的问题：

Why is the code compilable

因为从技术上讲这是一个有效的 javascript 代码（但不是有效的 class 字段）。

but the value of c.x is undefined

因为 x 是标签而不是 class 字段。

What is the effect of declaring a class property with :

您得到一个标签而不是 class 字段。

附录
另一个常见的错误是块代码：

class SomeClass {
  z = () => {
    x: 5;
  };
}

你会认为 z() 将 return 一个带有 x 键的对象：

`{x:5}`

但实际上你有一个标签为 x 的函数，它只是运行一个 5.

的表达式

为了完整起见，解决方法是添加显式 return 和另一组花括号

() => {return {x: 5}}

或者用圆括号括起来

() => ({x: 5})

编辑
作为以下评论的跟进：
需要明确的是，您的代码在我测试过的几个环境以及 stack-snippets 上编译，如下所示：

class SomeClass {
  x: 5;
  y = 10;
}

const c = new SomeClass();
console.log(c.x + ' : ' + c.y);

Answer 2

代码在 ES6 中无效。

您似乎 "compiling" 使用了 babel，并且无意中启用了 flow syntax extension (and also class properties for the second line). In flow, x: 5 is a class field type annotation。当然，5 作为一种类型没有意义，但显然它们允许相当任意的表达式。

用分号声明 class 属性时的奇怪行为

Weird behavior when declaring class property with semicolon

javascript

es6-class

ecmascript-next

用分号声明 class 属性 时的奇怪行为

Weird behavior when declaring class property with semicolon

javascript

es6-class

ecmascript-next

用分号声明 class 属性时的奇怪行为