JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

new演算子を使ってJavaScriptコンストラクタを作成する方法

JavaScriptでは、通常の関数を「new」演算子と組み合わせて呼び出すことで、コンストラクタとして機能させることができます。これにより、同じ構造を持つ複数のオブジェクトを効率的に生成できます。以下に、new演算子を使用してJavaScriptのコンストラクタを作成するコード例を紹介します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>new演算子によるJavaScriptコンストラクタ</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、new演算子を使ってコンストラクタからオブジェクトを生成します</h3>
<script>
    let resEle = document.querySelector(".result");
    function Human(firstName,lastName,age){
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    let obj = new Human('Rohan','Sharma',22);
    document.querySelector(".Btn").addEventListener("click", () => {
        for(i in obj){
            resEle.innerHTML += 'Key = ' + i + ' : Value = ' + obj[i] + '<br>'
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

new演算子を使ってJavaScriptコンストラクタを作成する方法

「CLICK HERE」ボタンをクリックすると、生成されたオブジェクトのプロパティが表示されます。

new演算子を使ってJavaScriptコンストラクタを作成する方法

コードの解説

このコードのポイントは以下の通りです。

  • Human関数：firstName、lastName、ageの3つの引数を受け取り、thisキーワードを使って各プロパティに値を代入しています。thisは、new演算子によって新しく作成されるオブジェクト自身を指します。
  • new演算子：新しい空のオブジェクトを生成し、そのオブジェクトをthisとしてバインドした状態で関数を実行し、最終的にそのオブジェクトを返します。
  • イベント処理：ボタンがクリックされると、for...inループでオブジェクトのすべてのプロパティ（キーと値）を取り出し、画面に出力します。

このように、new演算子を使うことで、同一のプロパティ構造を持つオブジェクトを簡潔かつ再利用可能な形で生成できるようになります。

  1. JavaScriptのnew演算子とは？オブジェクト生成の基本をサンプルコードで解説

    new演算子の基本的な役割 JavaScriptにおけるnew演算子は、ユーザーが定義したオブジェクト型や、コンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを新しく生成するために使用されます。 new演算子を使うことで、同じ構造を持つ複数のオブジェクトを効率よく作成でき、コードの再利用性や保守性が大きく向上します。 new演算子の使用例 以下は、JavaScriptでnew演算子を使用した実際のコード例です。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> &l

  2. JavaScriptのnew.targetメタプロパティとは？使い方をわかりやすく解説

    JavaScriptのnew.targetとはnew.targetは、関数やコンストラクタが実行時にnewキーワードを使って呼び出されたかどうかを判定できるメタプロパティです。通常、関数をnewをつけずに呼び出すと、コンストラクタとして意図された関数でも単なる通常の関数として実行されてしまい、グローバルオブジェクトにプロパティが設定されるなどの予期しない動作を引き起こす可能性があります。new.targetを利用することで、このような誤用を検出し、エラーとして通知することができます。new演算子とともに呼び出された場合、new.targetは呼び出されたコンストラクタ自身への参照を返します。一