問題描述

首先我想說的是，我真的不知道如何解釋我做了什么才能得到標(biāo)題中提到的錯(cuò)誤(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);
}

我有一個(gè)文件系統(tǒng)，在使用 Babel 編譯后，所有文件都連接到一個(gè)文件 (bundle.js).

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

在瀏覽器控制臺(tái)(Chrome 或 Firefox)中，錯(cuò)誤出現(xiàn)并且位于下一行:

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 因?yàn)槲覜]有在其他模塊中導(dǎo)入模塊(這不是必需的，因?yàn)槊總€(gè)文件都轉(zhuǎn)換為一個(gè)文件，所有內(nèi)容都可以訪問).

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

我做了一些研究，人們得到這個(gè)錯(cuò)誤的唯一原因是因?yàn)橛幸粋€(gè)大寫字母是不允許的.我沒有找到有關(guān)此錯(cuò)誤原因的任何其他信息.有人知道我為什么會(huì)收到此錯(cuò)誤嗎?有人有解決方案嗎?

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?

推薦答案

看起來你正在嘗試擴(kuò)展 DOM 的 節(jié)點(diǎn).你不能這樣做，它被定義為一個(gè)抽象接口，并且在瀏覽器中公開的主機(jī)提供的函數(shù)不能作為構(gòu)造函數(shù)調(diào)用(即使是子類).

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

這篇關(guān)于EcmaScript 6 的非法構(gòu)造函數(shù)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！