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

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

JavaScriptのnew.targetとは

new.targetは、関数やコンストラクタが実行時にnewキーワードを使って呼び出されたかどうかを判定できるメタプロパティです。

通常、関数をnewをつけずに呼び出すと、コンストラクタとして意図された関数でも単なる通常の関数として実行されてしまい、グローバルオブジェクトにプロパティが設定されるなどの予期しない動作を引き起こす可能性があります。new.targetを利用することで、このような誤用を検出し、エラーとして通知することができます。

new演算子とともに呼び出された場合、new.targetは呼び出されたコンストラクタ自身への参照を返します。一方、通常の関数呼び出しの場合はundefinedを返します。この性質を利用して、以下のようなチェック処理を実装できます。

コード例

以下は、JavaScriptにおけるnew.targetの使用例です。

<!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.target</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、newキーワードなしでStudentコンストラクタが呼び出されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function Student(name, age, place) {
        if (!new.target) {
            resEle.innerHTML = "Error : Student should be used with the new operator";
        }
        this.name = name;
        this.age = age;
        this.place = place;
    }
    BtnEle.addEventListener("click", () => {
        Student("Shawn", 22, "Delhi");
    });
</script>
</body>
</html>

実行結果

ページを開いた直後の表示は次のとおりです。

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

「CLICK HERE」ボタンをクリックすると、newキーワードなしでStudent関数が呼び出されるため、if (!new.target)の条件が真となり、画面にエラーメッセージが表示されます。

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

コードのポイント

  • Student関数内で!new.targetをチェックすることにより、newなしでの呼び出しを検出しています。
  • newなしで呼ばれた場合、new.targetはundefinedになるため、条件式が成立してエラーメッセージが出力されます。
  • ボタンのクリックイベントでは、意図的にnewを付けずに関数を呼び出すことで、この挙動を確認できるようにしています。

このようにnew.targetを使うことで、コンストラクタ関数の安全な使用を強制でき、開発者がnewの付け忘れによるバグを防ぐのに役立ちます。なお、ES6のclass構文では、newなしでの呼び出し自体が自動的にエラーになるため、このようなチェックは主に従来の関数ベースのコンストラクタパターンで活用されます。

  1. JavaScriptのdebuggerステートメントの使い方を徹底解説

    JavaScriptのdebuggerステートメントは、コード内にブレークポイントを設定するための構文です。実行中のコードがdebuggerステートメントに到達すると、その時点で処理が一時停止し、開発者ツールのデバッガーが利用可能であれば自動的にデバッガー機能が呼び出されます。 debuggerステートメントの基本動作 debuggerステートメントは、以下のような場面で特に役立ちます。 コードの特定の箇所で処理を止めて、変数の値を確認したいとき ループ処理の各ステップを詳細に追跡したいとき 複雑なロジックの不具合原因を特定したいとき なお、ブラウザの開発者ツール（DevTools）が開い

  2. JavaScriptのImage()オブジェクトとは？使い方とサンプルコードを解説

    JavaScriptにおけるImage()オブジェクトは、HTMLの<img>要素を表すオブジェクトです。このオブジェクトを使うことで、JavaScriptから動的に画像を生成し、Webページに追加することができます。Image()コンストラクタには、引数として画像の幅と高さをピクセル単位で指定できます。また、生成した画像オブジェクトのsrcプロパティに画像のURLを設定することで、画像を読み込むことが可能です。Image()オブジェクトの基本的な使い方以下は、JavaScriptでImage()オブジェクトを使用するサンプルコードです。コード例<!DOCTYPE html&