Babel 编译时提示 Class Constructor cannot be invoked without 'new' 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在使用 Babel 进行代码编译时，有时会遇到 Class Constructor cannot be invoked without 'new' 的错误提示。这个问题一般是由于编译后的代码中，类的构造函数被错误地转换为了普通函数，导致无法使用 new 关键字进行实例化。本文将详细介绍这个问题的解决方法，并提供示例代码。

问题的原因

在 ES6 中，我们可以使用 class 关键字来定义一个类，例如：

// javascriptcn.com 代码示例
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = new Person('Bob');
person.sayHello(); // 输出：Hello, Bob!

在编译时，Babel 会将上述代码转换为 ES5 代码，例如：

// javascriptcn.com 代码示例
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Person = function Person(name) {
  _classCallCheck(this, Person);

  this.name = name;
};

Person.prototype.sayHello = function () {
  console.log("Hello, " + this.name + "!");
};

var person = new Person('Bob');
person.sayHello(); // 输出：Hello, Bob!

可以看到，Babel 将 class 转换为了一个构造函数和原型方法的组合。其中，构造函数通过 _classCallCheck 函数来确保只能使用 new 关键字来实例化，否则会抛出一个错误。这个错误提示就是 Class Constructor cannot be invoked without 'new'。

但是，有时候 Babel 在编译时会错误地转换类的构造函数，导致无法使用 new 关键字进行实例化，从而出现上述错误。

解决方法

解决这个问题的方法比较简单，只需要在 Babel 的配置文件中添加一个插件即可。具体步骤如下：

安装 @babel/plugin-transform-classes 插件：

npm install --save-dev @babel/plugin-transform-classes

在 Babel 的配置文件中添加插件：

{
  "plugins": [
    "@babel/plugin-transform-classes"
  ]
}

重新编译代码，问题解决。

示例代码

下面是一个示例代码，演示了出现 Class Constructor cannot be invoked without 'new' 错误的情况：

// javascriptcn.com 代码示例
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = Person('Bob');
person.sayHello(); // 报错：Class Constructor cannot be invoked without 'new'

在这个示例中，我们错误地使用了类的构造函数，而没有使用 new 关键字进行实例化，导致出现错误。

下面是添加了 @babel/plugin-transform-classes 插件后的示例代码：

// javascriptcn.com 代码示例
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = Person('Bob');
person.sayHello(); // 报错：Class Constructor cannot be invoked without 'new'

可以看到，添加插件后，代码可以正常运行，不再出现错误。

总结

通过本文的介绍，我们了解了 Class Constructor cannot be invoked without 'new' 错误的原因和解决方法。在开发过程中，我们应该注意使用 new 关键字来实例化类，以避免出现这种错误。如果出现了这个错误，可以尝试添加 @babel/plugin-transform-classes 插件来解决问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657da7cfd2f5e1655d88234c