类中构造函数传参后动态生成数组失败，能否以对象属性为方法参数？

问题场景 #

想要实现一个类，通过构造函数传入的length值动态生成对应长度的数组作为对象属性，但当前代码运行后，输出的是空数组[]，而非预期的['_', '_']。

原代码如下：

class TestArray {
  constructor(length) {
    this.length = length;
  }

  buildArray = function(length) {
    let array = [];
    for (let i = length; i > 0; i--) {
      array.push("_");
    }
    return array;
  }

  array = this.buildArray(this.length);
}

let testArray = new TestArray(2);
console.log(testArray.array); // 输出[]，预期['_', '_']

let testArray2 = new TestArray(2);
console.log(testArray2.array); // 同样输出[]

问题判定：逻辑问题 #

这是典型的类字段初始化顺序导致的逻辑问题，和语法无关：

• 类的字段（比如这里的buildArray、array）会在构造函数执行之前完成初始化。
• 当执行array = this.buildArray(this.length)时，构造函数里的this.length = length还没执行，此时this.length是undefined。
• 传入buildArray的参数是undefined，循环条件i > 0不成立，自然返回空数组。

几种优化实现方式 #

方式1：将数组初始化移到构造函数中 #

把array的赋值逻辑放到构造函数里，确保this.length被设置后再执行数组生成：

class TestArray {
  constructor(length) {
    this.length = length;
    // 先设置length，再生成数组
    this.array = this.buildArray(this.length);
  }

  // 改用普通类方法，比箭头函数更符合类方法的使用场景
  buildArray(length) {
    let array = [];
    for (let i = length; i > 0; i--) {
      array.push("_");
    }
    return array;
  }
}

let testArray = new TestArray(2);
console.log(testArray.array); // 输出['_', '_']

方式2：使用getter实现动态更新数组 #

如果希望array能随length的变化自动更新，用getter更合适：

class TestArray {
  constructor(length) {
    this.length = length;
  }

  buildArray(length) {
    // 用Array.from简化数组生成逻辑
    return Array.from({ length }, () => "_");
  }

  get array() {
    return this.buildArray(this.length);
  }
}

let testArray = new TestArray(2);
console.log(testArray.array); // ['_', '_']
// 修改length后，array会自动重新生成
testArray.length = 3;
console.log(testArray.array); // ['_', '_', '_']

方式3：极简实现（无需单独方法） #

如果只是生成固定填充值的数组，直接用Array.fill或Array.from简化，不需要单独的buildArray方法：

class TestArray {
  constructor(length) {
    this.length = length;
    // 一行代码生成指定长度的填充数组
    this.array = Array(length).fill("_");
  }
}

let testArray = new TestArray(2);
console.log(testArray.array); // ['_', '_']

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