【JavaScript】 new演算子は何をやっている？

一時期、オブジェクト作成はnewが必要ないという議論がありました。
確かに必要ありませんが、newの本質は単なるオブジェクト作成ではありません。

そこで今回は、new演算子が何をやっているのかについて解説します。

new演算子は、コンストラクター関数のprotorypeプロパティを、新規オブジェクトのプロトタイプチェーンに組み込む処理をおこなっています。
プロトタイプチェーンは、JavaScript上での継承の仕組みです。

参考記事：
■【JavaScript】 プロトタイプとは？prototypeプロパティはプロトタイプではない件について

コンストラクター関数のprototypeプロパティに関数独自のプロパティが用意されていない場合は、newを使用しなくても問題ありません。

例:

function a( x ){
  this.x = x;
}
const b = new a( 10 );

これを、newをしないパターンに置き換えてみます。

function a( x ){
  /* const obj = {}; obj.x = x; return obj; */
  return { x: x }; // 上コメントの短縮パターン
}
const b =  a( 10 );

コンストラクター関数のprototypeプロパティに関数独自のプロパティが用意されている場合は、newが使用です。

function a( x ){
    this.x = x;
}
a.prototype={
   getX:function(){ return this.x }
};
const b = new a( 10 );
const c =  b.getX();  // c = 10

上の関数aをnewを、newが必要ないケースで例示したパターンに書き換えてみます。

function a( x ){
    return { x: x };
}
a.prototype={
   getX:function(){ return this.x }
};
const b =  a( 10 );
const c =  b.getX();  // TypeError: b.getX is not a function

a.prototypeが、関数aで返されたオブジェクトのプロタイプチェーンに組み込まれていないため、b.getX() を実行できません。

ただし、次のように Object.create() を使用すると、プロタイプチェーンを構築することができます。

function a( x ){
        const obj = Object.create(a.prototype);
        obj.x = x;
        return obj;
}
a.prototype={
        getX:function(){ return this.x }
};
const b =  a( 10 );
const c =  b.getX();  // c = 10

newを使用したほうが簡潔なので、この方法はおススメできません。

new演算子は、次のことをおこなっています。

関数内コード実行前

1. オブジェクトとして最低限の機能を持っている、新規オブジェクトを作成。

    

   新規オブジェクト:{ }

    

2. 新規オブジェクトのプロパティチェーンに、コンストラクター関数のprototypeプロパティへの参照をセット

    

   新規オブジェクト:{
      [[プロパティチェーン]] → コンストラクター関数のprototypeプロパティ
   }

    

3. 新規オブジェクトを this として、関数内コードに渡す

関数内コード終了後

関数内コードにreturn式がない場合、this値をリターンします。

例えば、次のように最後にthis値をリターンするコードがあるとき、

function a( x ){
    this.x = x;
    return this;
}

最後のreturn行を削除できます。

function a( x ){
    this.x = x;
}

これは、new演算子の記述漏れ時に、不具合を発見するのに役立ちます。

function a( x ){
    this.x = x;
}
const b = a( 10 );  // b は undefined
const c = b.x;       // TypeError: b is undefined

new演算子がない場合、関数aからの返り値はundefinedです。
そのため、後に続くコードでプロパティを参照しようとするとエラーとなり、処理がストップします。

this値をリターンした場合、そのまま処理が続く可能性があり、潜在的な不具合となるかもしれません。

関数を new演算子で呼び出した場合、関数内のthisは新規オブジェクトです。
このオブジェクトは、自由にプロパティを追加しても問題ありません。

しかしnew演算子を使用しない場合、不具合が生じることがあります。
この場合のthis値は、strictモードかどうかで変わってきます。

strictモードの場合、this値は undefined です。
undefinedにプロパティを追加すると、エラーが発生します。
デバッグ時にエラーを捕捉できるようにしておけば、比較的容易に修正可能です。

非strictモードの場合、this値はブラウザならWindowsです。
つまり、this値に追加したつもりのプロパティが、グローバルオブジェクトに追加されたことになります。
これは、値の競合などがおき、気が付きにくい不具合の原因となります。

大きなプロジェクトなどでは、次のような方法で new呼び出しの判定をおこない、エラーをスローするなどの方策をするのもよいですね。

function a( x ){
        if( new.target === undefined ) throw new Error("newで呼び出してください");
       this.x = x;
}

new演算子はオブジェクトを作成するだけではなく、継承の仕組みを構築しています。
とても重要な演算子なんです。

また、JavaScript初心者のうちはnew演算子を使用したらエラーがでる、ということも多いです。
そんなときは、次の記事を参考にしてください。
■【JavaScript】 new したら コンストラクターではないと言われたなぜ？

そもそもコンストラクターって何？という人は、次の記事が参考になります。
■【JavaScript】 コンストラクターとは？関数とは違うのか？