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

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

new演算子の基本的な役割

JavaScriptにおけるnew演算子は、ユーザーが定義したオブジェクト型や、コンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを新しく生成するために使用されます。

new演算子を使うことで、同じ構造を持つ複数のオブジェクトを効率よく作成でき、コードの再利用性や保守性が大きく向上します。

new演算子の使用例

以下は、JavaScriptでnew演算子を使用した実際のコード例です。

<!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;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptのnew演算子</h1>
<div class="result"></div>
<br />
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、Personコンストラクタからperson1オブジェクトが生成されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function Person(name, age, designation) {
        this.name = name;
        this.age = age;
        this.designation = designation;
    }
    let person1 = new Person("Rohan Sharma", 19, "student");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "person1.name = " + person1.name + "<br>";
        resEle.innerHTML += "person1.age = " + person1.age + "<br>";
        resEle.innerHTML +=
        "person1.designation = " + person1.designation + "<br>";
    });
</script>
</body>
</html>

実行結果

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

上記のコードでは、Personというコンストラクタ関数を定義し、new Person(...)によってインスタンスperson1を生成しています。

ボタンをクリックした後の表示

「クリックしてください」ボタンを押すと、以下のようにオブジェクトの各プロパティが画面に出力されます。

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

  • person1.name：「Rohan Sharma」という名前が表示される
  • person1.age：年齢の「19」が表示される
  • person1.designation：「student」という役割が表示される

このように、new演算子を使うことで、コンストラクタ関数をもとにした新しいオブジェクトインスタンスを簡単に作成できます。モダンなJavaScriptではclass構文も利用できますが、内部的には依然としてnew演算子によるオブジェクト生成が行われています。

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

    JavaScriptでは、通常の関数を「new」演算子と組み合わせて呼び出すことで、コンストラクタとして機能させることができます。これにより、同じ構造を持つ複数のオブジェクトを効率的に生成できます。以下に、new演算子を使用してJavaScriptのコンストラクタを作成するコード例を紹介します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial

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

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