首先,我想说,我不知道如何解释我为了得到标题中提到的错误(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
,因为我没有在其他模块中导入模块(这不是必需的,因为每个文件都转换为一个文件,一切都可以访问)。
我做了一些研究,peoeple得到这个错误的唯一原因是因为有一个大写字母,其中没有一个被允许。我没有找到关于此错误原因的任何其他信息。有人知道我为什么会收到此错误吗?有人有解决方案吗?
答案 0 :(得分:5)
这是此错误消息的第一个Google结果,并且经常与Web组件一起出现。通过一个看起来非常有效的Web组件,可以列出以下内容:
export default class UserAvatar extends HTMLElement {
constructor() {
super();
}
}
如果忘记调用customElement.define
并尝试实例化该组件,则会收到此错误。
因此,new UserAvatar
将因非法构造函数而失败。要对其进行修复,请先对其进行定义:
customElements.define('tom-user-avatar', UserAvatar);
在Firefox和Chrome中这都是错误的错误消息,浏览器供应商应该在这里做得更好。如果您使用的是document.createElement
而不是new UserAvatar
,则可能会很快捕获到该信息,因为它会提醒您您尚未设置名称。不过,有一些原因可以使用构造函数来初始化自定义元素,例如传递初始化参数。
答案 1 :(得分:2)
您似乎正在尝试扩展DOM Node
。您无法做到这一点,它是主机提供的功能,与必要的JavaScript管道不兼容。