如何规避浏览器控制台中重新声明JavaScript类的语法错误？

你碰到的这个报错是因为ES6类的声明规则和let/const一致——它们属于块级作用域，并且在同一个作用域内不允许重复声明同一个标识符。哪怕你是想修改类的结构后重新声明，也会触发这个语法错误。下面给你几个实用的解决办法：

方案1：使用类表达式赋值给变量 #

把类定义成表达式并赋值给一个变量，这样后续可以直接重新赋值覆盖，完全避开重复声明的限制，这也是控制台调试时最常用的方式：

// 第一次定义类
let ClassName = class {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
};

// 后续修改后重新赋值（不会报错）
ClassName = class {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hi there, ${this.name}!`);
  }
  // 新增方法
  farewell() {
    console.log(`Goodbye, ${this.name}!`);
  }
};

方案2：修改类的原型链（无需重新声明类） #

如果只是要扩展或修改类的方法，不需要重新声明整个类，直接操作类的原型即可。这种方式的好处是，已经创建的类实例也能自动继承修改后的方法：

// 先声明一次类
class ClassName {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

// 修改现有方法
ClassName.prototype.greet = function() {
  console.log(`Hey, ${this.name}!`);
};

// 新增方法
ClassName.prototype.farewell = function() {
  console.log(`See you later, ${this.name}!`);
};

方案3：用独立作用域隔离类声明 #

如果一定要使用声明式的class语法，可以把每次声明放在独立的作用域里（比如立即执行函数），这样不同作用域的类名不会冲突：

// 第一次声明并暴露到全局
(function() {
  class ClassName {
    constructor(name) {
      this.name = name;
    }
    greet() {
      console.log(`Hello, ${this.name}!`);
    }
  }
  window.ClassName = ClassName;
})();

// 第二次修改后声明，放在新作用域
(function() {
  class ClassName {
    constructor(name) {
      this.name = name;
    }
    greet() {
      console.log(`Hi, ${this.name}!`);
    }
  }
  window.ClassName = ClassName;
})();

总的来说，控制台调试场景下优先选方案1，灵活又省心；如果只是小改方法，方案2更高效。

内容的提问来源于stack exchange，提问作者Mussé Redi