[解決済み] EcmaScript 6 での不正なコンストラクタ
2022-02-18 06:46:02
質問
まず最初に、タイトルにあるようなエラーが発生するために何をしたのか、どう説明すればいいのかよくわからないということをお伝えしたいと思います(
uncaught TypeError: Illegal constructor
). Ecmascript 6をプレーンなJavascriptにコンパイルするためにgulpfileを使用しています。私の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でコンパイルされた後、1つのファイル(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
なぜなら、他のモジュールでモジュールをインポートしていないからです(すべてのファイルが1つのファイルに変換され、そこにすべてがアクセスできるため、これは必要ではありません)。
私はいくつかの研究を行い、人々がこのエラーを取得した唯一の理由は、何も許されないところに大文字があったためです。このエラーの原因について、他には何も見つかりませんでした。なぜこのエラーが発生するのか、誰か心当たりはありませんか?また、解決策をお持ちの方はいらっしゃいますか?
解決方法は?
DOM の
Node
. それはできません。抽象的なインターフェースとして定義されており、そのためにブラウザで公開されているホスト提供の関数は、(たとえサブクラスであっても)コンストラクタとして呼び出すことはできません。
関連
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】最大呼び出しスタックサイズ超過エラーとその修正方法とは?
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] jQueryでページを更新するにはどうすればよいですか?
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] ECMAScript 6 オブジェクトを返す矢印関数
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】フォームコントロールの値アクセサがない
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】SyntaxError: 'import' と 'export' は 'sourceType: module' とだけ表示されるかもしれない - Gulp
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】Kendo Observable Bindingと併用する場合、Kendo Switch Labelsを変更することは可能ですか?[Kendo-UI]です。
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]