EcmaScript 6 的非法构造函数

Question

首先，我想说的是，我真的不知道如何解释我为获得标题中提到的错误所做的事情 ( uncaught TypeError: Illegal constructor)。我正在使用 gulpfile 将我的 Ecmascript 6 编译为纯 Javascript。我的 gulpfile 看起来像这样：

var gulp = require('gulp');
var concat = require('gulp-concat');
var babel = require('gulp-babel');

gulp.task('compile', function () {
    return gulp.src(['resources/assets/js/*.js', 'resources/assets/js/components/*.js'])
        .pipe(babel({
                presets: ['es2015']
        }).on('error', logError))
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('watch', function () {
   gulp.watch('resources/assets/js/**/*', ['compile']);
})

gulp.task('default', ['watch']);

function logError(err) {
    console.log(err);
}

我有一个文件系统，在用 Babel 编译后，所有文件都连接到一个文件 (bundle.js)。

在浏览器控制台（Chrome 或 Firefox）中，错误出现并位于下一行：

var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, element));

这是这个的非编译代码：

class Dropdown extends Node {

    constructor(element) {
        super(element);

        this.registerEvents(['click', 'change', 'blur']);
    }

    onClick() {
        this.$element.addClass('clicked');
    }
}

这是同一个类的编译代码：

var Dropdown = function (_Node) {
    _inherits(Dropdown, _Node);

    function Dropdown(element) {
        _classCallCheck(this, Dropdown);

        var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call(this, element));

        _this.registerEvents(['click', 'change', 'blur']);

        return _this;
    }

    _createClass(Dropdown, [{
        key: 'onClick',
        value: function onClick() {
            this.$element.addClass('clicked');
        }
    }]);

    return Dropdown;
}(Node);

我没有使用，export default Dropdown因为我没有在其他模块中导入模块（这不是必需的，因为每个文件都转换为一个文件，所有内容都可以访问）。

我做了一些研究，人们得到这个错误的唯一原因是因为有一个大写字母是不允许的。我没有找到有关此错误原因的任何其他信息。有人知道为什么我会收到此错误吗？有人有解决方案吗？

Answer 1

这是此错误消息的第一个 Google 结果，它也经常与 Web 组件一起出现。使用看起来非常有效的 Web 组件，如下所示：

export default class UserAvatar extends HTMLElement {
  constructor() {
    super();
  }
}

如果您忘记调用customElements.define并尝试实例化组件，则会收到此错误。

因此，new UserAvatar会因Illegal constructor失败。要修复它，请先定义它：

customElements.define('tom-user-avatar', UserAvatar);

这在 Firefox 和 Chrome 中都是一个糟糕的错误消息，浏览器供应商应该在这里做得更好。如果您使用的是document.createElement代替，new UserAvatar您可能会很快发现这一点，因为它会提醒您尚未设置名称。使用构造函数初始化自定义元素是有原因的，比如传入初始化参数。

Answer 2

看起来您正在尝试扩展 DOM 的Node. 你不能这样做，它被定义为一个抽象接口，并且在浏览器中公开的主机提供的函数不能作为构造函数调用（即使是由子类调用）。