JavaScript类字段默认值生效问题及代码实践合理性咨询

先看这段类定义代码：

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

当不传参数实例化Rectangle时，height的默认值0不会生效，最终实例是{ height: undefined, width: undefined }——这段代码确实属于不良实践。

原因很明确：类字段的初始化逻辑是先执行类顶部的默认值赋值，再执行构造函数内的赋值操作。如果构造函数里给同一个字段重新赋值，不管传入的参数是什么（包括不传参数导致的undefined），都会覆盖类字段的默认值。

只有当构造函数不对该字段进行赋值时，类字段的默认值才会保留生效，比如下面这个例子：

class Rectangle {
  height = 10;
  width;
  constructor(width) {
    this.width = width;
  }
}

const rec = new Rectangle();

console.log(rec);
// { height: 10, width: undefined }

这里height的默认值10就正常生效了，因为构造函数没有对this.height进行赋值操作。

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