【JavaScript入門】オブジェクトリテラルとコンストラクタ関数で作るオブジェクトの違いとは？

JavaScriptでオブジェクトを生成する方法として代表的なのが「オブジェクトリテラル」と「コンストラクタ関数」の2つですが、この2つには重要な違いがあります。

オブジェクトリテラルで作成されたオブジェクトはシングルトンとして扱われます。つまり、オブジェクトに変更を加えると、その変更はスクリプト全体に影響します。一方、コンストラクタ関数で作成されたオブジェクトは複数の独立したインスタンスを持つことができ、あるインスタンスへの変更が他のインスタンスに波及することはありません。

それでは、それぞれの方法について詳しく見ていきましょう。

1) オブジェクトリテラルで作成されたオブジェクト

オブジェクトリテラルで作成されたオブジェクトはシングルトンであるため、オブジェクトへの変更はスクリプト全体で共有されます。これは、オブジェクトリテラルを別の変数に代入すると、新しいオブジェクトが作られるのではなく、同じオブジェクトへの参照がコピーされるためです。したがって、一方の変数を通じて行った変更は、もう一方の変数からも同じように見えます。

次の例では、最初は「student」と「newStudent」の両方のオブジェクトが同じ名前（Ravi）を表示しています。しかし、「newStudent」の名前を変更すると（「student」の名前はそのまま）、両方のオブジェクトとも変更後の名前（kumar）を表示します。

コード例

<html>
<body>
<script>
    var student = {
       name: "Ravi"
    }
    var newStudent = student;
    document.write("変更前");
    document.write("</br>");
    document.write("student name = " + student.name);
    document.write("</br>");
    document.write("newStudent name = " + newStudent.name);
    document.write("</br>");
    newStudent.name = "kumar";
    document.write("変更後");
    document.write("</br>");
    document.write("student name = " + student.name);
    document.write("</br>");
    document.write("newStudent name = " + newStudent.name);
</script>
</body>
</html>

実行結果

変更前
student name = Ravi
newStudent name = Ravi
変更後
student name = kumar
newStudent name = kumar

このように、片方のオブジェクトのプロパティを変更しただけで、もう片方の値も変わってしまいました。これは両変数が同一のオブジェクトを参照している（シングルトンである）ことを示しています。

2) コンストラクタ関数で作成されたオブジェクト

関数コンストラクタを使って定義されたオブジェクトは、newキーワードを付けて呼び出すことで、そのオブジェクトの複数の独立したインスタンスを生成できます。つまり、あるインスタンスに加えられた変更は、他のインスタンスには一切影響しません。

次の例では、「newStudent」オブジェクトの名前を変更しても、もう一方の「student」オブジェクトの名前は変わりません。出力結果に示すように、両方のオブジェクトはそれぞれ異なる名前を表示します。

コード例

<html>
<body>
<script>
    var stu = function() {
       this.name = "Ravi"
    }
    var newStudent = new stu();
    var student = new stu();
    document.write("変更前");
    document.write("<br>");
    document.write("student name = " + student.name);
    document.write("<br>");
    document.write("newStudent name = " + newStudent.name);
    document.write("<br>");
    newStudent.name = "kumar";
    document.write("変更後");
    document.write("<br>");
    document.write("student name = " + student.name);
    document.write("<br>");
    document.write("newStudent name = " + newStudent.name);
</script>
</body>
</html>

実行結果

変更前
student name = Ravi
newStudent name = Ravi
変更後
student name = Ravi
newStudent name = kumar

コンストラクタ関数の場合は、newを付けて呼び出すたびに新しいオブジェクトがメモリ上に生成されるため、各インスタンスが独立した状態を保てます。

まとめ

両者の違いを整理すると、以下のようになります。

オブジェクトリテラル：シングルトンとして動作し、変数間で同じオブジェクトへの参照が共有される。1箇所の変更が全体に影響する。
コンストラクタ関数：newを使うことで複数の独立したインスタンスを生成できる。あるインスタンスの変更は他に影響しない。

用途に応じて使い分けることが重要です。アプリケーション全体で1つの共通設定や状態を保持したい場合はオブジェクトリテラルが適しており、同じ構造を持つ複数のデータ（ユーザー情報など）を扱いたい場合はコンストラクタ関数（またはES6以降のクラス構文）が適しています。

JavaScriptのグローバル名前空間汚染とは？名前の衝突（ネームコリジョン）が起こる仕組みと対策

JavaScriptで特定の文字の前後の文字列を取得する方法｜substring()の使い方を実例付きで解説

JavaScriptにおける関数とメソッドの違いとは？わかりやすく解説
JavaScriptにおいて、関数とメソッドは本質的には同じものです。両者の違いは、メソッドがオブジェクトのプロパティとして定義された関数であるという点にあります。つまり、独立して定義されたものを「関数」、オブジェクトに紐づけられたものを「メソッド」と呼びます。 JavaScriptの関数の基本形まず、一般的な関数の定義方法を見てみましょう。 function functionname(param1, param2){ // 処理内容 } JavaScriptのメソッドの例メソッドは、オブジェクトに関連付けられた関数です。次の例では、employeeオブジェクトの中にdetails
C＃におけるリテラルと定数の違いとは？種類と書き方をわかりやすく解説
定数とリテラルとは何か定数（constant）とは、プログラムの実行中に値を変更できない固定値のことです。そして、その固定値をソースコード上に直接記述したものを「リテラル」と呼びます。定数は整数、浮動小数点数、文字、文字列といった基本データ型のいずれにもなり得ます。さらに、enum（列挙型）による列挙定数も存在します。整数リテラル整数リテラルは、10進数または16進数で表現できます。基数を指定するにはプレフィックス（接頭辞）を使用します。16進数の場合は「0x」または「0X」を付け、10進数の場合はプレフィックスを付けません。 150 300u 上記の例では「150」が10進数の整数リ