JavaScript中public字段声明的实际作用是什么？

问题原因 #

你测试得到undefined的结果和公共字段特性本身无关，是代码逻辑的执行顺序导致的：
类公共字段的初始化时机是在构造函数代码执行前完成，你的代码实际执行逻辑为：

1. 实例初始化阶段先给height赋值为0，给width赋值为undefined
2. 构造函数执行时，由于你没有传参，height、width两个形参的值都是undefined，执行this.height = height时直接把之前赋值的0覆盖成了undefined
   如果要让字段默认值正常生效，只需修改构造函数的赋值逻辑即可：

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    if (height !== undefined) this.height = height;
    if (width !== undefined) this.width = width;
  }
}
// 此时调用new Rectangle()得到的height就是预期的0

公共字段声明的核心优势 #

• 自文档化：所有实例具备的属性统一声明在类顶部，其他开发者无需遍历构造函数、各个方法体就能梳理清楚类的结构，可读性大幅提升
• 避免原型链风险：提前声明字段可以保证所有用到的实例属性都是实例自身属性，不会出现属性误写时意外修改原型属性、触发原型链setter的问题
• 逻辑聚合：默认值可以直接在字段声明处设置，不需要在构造函数内写大量this.xxx = xx ?? 默认值的冗余判断，属性的默认配置和声明绑定，逻辑更集中
• 新特性基础：是私有字段、静态字段、属性修饰器等后续JS类相关新特性的基础语法，适配TS类型校验、静态代码检查工具的校验规则，能提前发现属性名拼写错误等低级问题
• 性能优化：JS引擎可以根据提前声明的类字段做内存布局优化，比动态添加属性的执行效率更高

内容的提问来源于stack exchange，提问作者Noob