如何在JavaScript类中使用解构赋值？解决Uncaught ReferenceError报错

你遇到的Uncaught ReferenceError: a is not defined错误有两个核心原因：

1. 类内部默认启用严格模式，严格模式下不允许未声明的变量赋值，你直接写[a, b, c] = ...时，a、b、c未被声明，JS引擎无法识别。
2. 方法名使用了关键字function，这是语法错误，必须改成合法的标识符（比如fillArray）。

解决方法：声明局部变量并解构 #

最简洁的方式是直接解构this对象，把需要的属性提取到方法作用域的局部变量中，彻底避免重复写this.：

class className {
  constructor() {
    this.a = 1;
    this.b = 2;
    this.c = 3;
  }
  // 替换为合法的方法名
  fillArray() {
    // 解构this的属性到局部变量
    const { a, b, c } = this;
    
    // 用a、b、c填充10*10数组的示例
    const tenByTenArray = Array.from({ length: 10 }, () => {
      return Array.from({ length: 10 }, () => {
        // 直接使用a、b、c，无需加this
        return [a, b, c][Math.floor(Math.random() * 3)];
      });
    });
    
    console.log(tenByTenArray);
  }
}

let obj = new className();
obj.fillArray();

如果你更倾向于数组解构的写法，只需给变量加上声明即可：

fillArray() {
  // 数组解构时用const/let声明变量
  const [a, b, c] = [this.a, this.b, this.c];
  // 后续填充数组的逻辑同上
}

关键说明 #

• 严格模式下所有变量必须先声明再使用，所以解构时一定要用let或const声明变量。
• 解构this对象的方式更高效，尤其是提取多个属性时，比数组解构少写大量重复的this.。

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