【JavaScript】 new したら コンストラクタではないと言われたなぜ?
更新日:2020/02/29
JavaScriptでオブジェクトをnewしたら、
「TypeError: xxx is not a constructor」
とエラーがでた。
コンストラクタではないからのようだが、意味がわからない。
どうすればいいのか、調べてみた。
エラーを再現してみる
まずはコンストラクタではないと言われるケースをいくつか再現してみましょう
作成したオブジェクトをnew
let a = {
x: 1,
f : function(){
console.log( this.x );
}
};
let b = new a; // TypeError: a is not a constructor
自分で作成したオブジェクトをnewすると、コンストラクタではないと言われます。
newしたオブジェクトをnewしてみる
let a = function( ){ this.x = 5; };
let b = new a( );
let c = new b( ); // TypeError: b is not a constructor
newで作成したオブジェクトにnewをすると、コンストラクタではないと言われます。
アロー関数にオブジェクトをnew
let a = ( ) => { this.x = 5; };
let b = new a; // TypeError: a is not a constructor
アロー関数にnewしても、エラーになりますね。
newできるのは function( ){ } のみ
コンストラクタでないと言われるのは、オブジェクトがコンストラクタではないからです。
そのまんまです。
ではコンストラクタがなにかというと、 function( ){ } 構文で定義された関数のことを指します。
アロー関数はコンストラクタを持っていません。
newで作成したオブジェクトもコンストラクタを持っていません。
詳しくは、こちらの記事を見てください。
参考:【JavaScript】 コンストラクタとは?関数とは違うのか?
次の例は、問題なくnewできます。
function( ){ }定義にnew
function a(){ this.x = 5;}
const b = new a();
const c = function (){ this.x = 5;};
const d = new c();
const e = {
f:function(){ this.x = 5;}
};
const h = new e.f();
次の例は、newできません。
newできない
const a = {
b:"newできない"
};
const c = new a; // TypeError: a is not a constructor
const d = new a.b; // TypeError: a is not a constructor
まとめ
コンストラクターではないというエラーがでるのは、文字通りコンストラクターではないから。
僕もめちゃくちゃ悩みました。
エラーがでたら、コンストラクターかどうか。もう一度確認してみてください。
更新日:2020/02/29
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。