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

【JavaScript】オブジェクトがクラスのインスタンスかどうかを判定する方法

JavaScriptでは、instanceof 演算子を使うことで、あるオブジェクトが特定のクラス（コンストラクタ関数）のインスタンスであるかどうかを簡単に判定できます。

instanceof 演算子とは？

instanceof 演算子は、左辺のオブジェクトが右辺に指定したコンストラクタ関数のプロトタイプチェーン上に存在するかどうかを評価し、その結果を真偽値（true / false）として返します。この仕組みを利用することで、オブジェクトがどのクラスから生成されたものなのかを実行時に動的にチェックできます。

コード例

以下は、ボタンをクリックしたときに student1 オブジェクトが Student クラスのインスタンスであるかどうかを確認するサンプルコードです。

実装例

<!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>オブジェクトがクラスのインスタンスかどうかを確認する</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、student1 オブジェクトが Student のインスタンスかどうかを判定します</h3>
<script>
    let resEle = document.querySelector(".result");
    function Student(name, age, standard) {
        this.name = name;
        this.age = age;
        this.standard = standard;
    }
    let student1 = new Student("Rohan", 18, 12);
    document.querySelector(".Btn").addEventListener("click", () => {
        if (student1 instanceof Student) {
            resEle.innerHTML = "student1 は Student のインスタンスです";
        } else {
            resEle.innerHTML = "student1 は Student のインスタンスではありません";
        }
    });
</script>
</body>
</html>

出力結果

ページを表示すると、次のような画面になります。

【JavaScript】オブジェクトがクラスのインスタンスかどうかを判定する方法

「CLICK HERE」ボタンをクリックすると、判定結果が画面に表示されます。

【JavaScript】オブジェクトがクラスのインスタンスかどうかを判定する方法

ポイントまとめ

  • instanceof 演算子は、オブジェクトが特定のクラスのインスタンスかどうかを真偽値で返す。
  • 条件分岐（if 文）と組み合わせることで、処理を振り分けることができる。
  • 継承関係がある場合も、プロトタイプチェーンをたどって正しく判定される。
  1. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例

  2. JavaScriptで多次元オブジェクトを作成する方法【サンプルコード付き】

    はじめに JavaScriptでは、オブジェクトのプロパティの値として別のオブジェクトを持たせることで、多次元（ネストされた）オブジェクトを作成できます。この構造を活用すると、氏名や学校情報、住所のように階層関係のあるデータを、直感的かつ整理された形で表現することが可能です。 サンプルコード 以下は、多次元JavaScriptオブジェクトを作成し、コンソールに表示するためのコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /