javascript - 用分号声明类属性时的奇怪行为

Question

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

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

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

使用 : 声明类属性有什么作用？

Answer 1

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

所以回答你的问题:

Why is the code compilable

因为从技术上讲，这是一个有效的 JavaScript 代码(但不是有效的 class 字段)。

but the value of c.x is undefined

因为x是一个标签而不是类字段。

What is the effect of declaring a class property with :

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

<小时/> 附录
另一个常见的错误是 block 的代码:

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

您可能会认为 z() 将返回一个带有 x 键的对象:

`{x:5}`

但实际上您有一个标签为 x 的函数，它只运行 5 的表达式。

为了完整起见，修复方法是添加显式返回和另一组花括号

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

或者只是用括号将整个内容括起来

() => ({x: 5})

编辑
作为以下评论的后续:
需要明确的是，您的代码在我测试的几个环境以及堆栈片段上进行编译，如下所示:

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

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