エラー対応オブジェクト構文

【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

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。