EcmaScript 6 的非法构造函数

问题描述

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

First of all I would like that say that I don't really know how I can explain what I did on order to get the error mentioned in the title (uncaught TypeError: Illegal constructor). I am using gulpfile in order to compile my Ecmascript 6 to plain Javascript. My gulpfile looks like this:

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).

I have a filesystem where all files are concatenated to one file (bundle.js), after being compiled with Babel.

在浏览器控制台(Chrome 或 Firefox)中，错误出现并且位于下一行:

In the browsers console (either Chrome or Firefox), the error appears and it is located in the next line:

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');
    }
}

这是同一类的编译代码:

And this is the compiled code of the same class:

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 因为我没有在其他模块中导入模块(这不是必需的，因为每个文件都转换为一个文件，所有内容都可以访问).

I am not using export default Dropdown because I am not importing modules in other modules (this is not needed because every file is converted to one file, where everything is accessible).

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

I did some research and the only reason why peoeple got this error was because there was a capital letter where none was allowed. I didn't find anything else about the cause of this error. Does someone have an idea why I get this error? And does someone have a solution?

推荐答案

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

It looks like you're trying to extend DOM's Node. You can't do that, it's defined as an abstract interface, and the host-provided function exposed in browsers for it can't be called as a constructor (even by subclasses).

这篇关于EcmaScript 6 的非法构造函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！