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

JavaScriptのSymbol.hasInstanceプロパティとは？使い方と実行例をわかりやすく解説

JavaScriptのSymbol.hasInstanceは、あるコンストラクターが特定のオブジェクトを「自身のインスタンス」として認識しているかどうかを判定するためによく知られたシンボル（well-known symbol）です。

実は、普段使っているinstanceof演算子も、内部ではこのSymbol.hasInstanceメソッドを呼び出しています。つまり obj instanceof Array は Array[Symbol.hasInstance](obj) とほぼ同じ意味になります。この仕組みを利用すると、instanceofの判定条件をカスタマイズすることも可能です。

Symbol.hasInstanceの基本

  • Array[Symbol.hasInstance](obj) … objが配列であればtrueを返す
  • CustomFunc[Symbol.hasInstance](obj) … objがそのコンストラクターのインスタンスであればtrueを返す

コード例

以下は、配列と独自コンストラクターに対してSymbol.hasInstanceを使ってインスタンス判定を行うサンプルコードです。

<!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;
    }
    div {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Symbol.hasInstance プロパティ</h1>
<div class="sample"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、ele が Array のインスタンスか、str が custom() のインスタンスかをそれぞれ判定できます</h3>
<script>
    let fillEle = document.querySelector(".sample");
    let ele = [1, 2, 3];
    function custom() {}
    var str = new custom();
    fillEle.innerHTML += ele + "<br>" + custom + "<br>";
    document.querySelector(".Btn").addEventListener("click", () => {
        fillEle.innerHTML += Array[Symbol.hasInstance](ele) + "<br>";
        fillEle.innerHTML += custom[Symbol.hasInstance](str);
    });
</script>
</body>
</html>

実行結果

ページを開くと、まず対象となる配列 ele と関数 custom の内容が表示されます。

JavaScriptのSymbol.hasInstanceプロパティとは？使い方と実行例をわかりやすく解説

続いて「クリックしてください」ボタンを押すと −

JavaScriptのSymbol.hasInstanceプロパティとは？使い方と実行例をわかりやすく解説

画面には次のように判定結果が出力されます。

  • Array[Symbol.hasInstance](ele) → true：ele は配列なので、Array はこれを自分のインスタンスとして認識します。
  • custom[Symbol.hasInstance](str) → true：str は new custom() で生成されたオブジェクトなので、custom のインスタンスとして認識されます。

このように、Symbol.hasInstanceを使うことで、instanceof演算子と同等の型チェックを明示的に行えます。また、静的メソッドとしてSymbol.hasInstanceを定義すれば、独自クラスのinstanceof挙動を自由にカスタマイズできる点も覚えておくと便利です。

  1. JavaScriptでカスタムエラーを作成する方法【サンプルコード付き】

    JavaScriptでは、組み込みのErrorクラスを継承することで、アプリケーション固有のカスタムエラーを簡単に定義できます。カスタムエラーを活用すると、エラーの種類や原因を明確に区別でき、デバッグやエラーハンドリングの精度が大きく向上します。 カスタムエラーの基本 カスタムエラーを作成するには、ES6のclass構文でErrorクラスをextendsし、コンストラクタ内でsuper()を呼び出してエラーメッセージを親クラスに受け渡します。さらに、this.nameに独自のエラー名を設定することで、標準のErrorオブジェクトと明確に区別できるようになります。 実装例 以下は、JavaS

  2. JavaScriptのBigIntとは？使い方をサンプルコード付きで解説

    BigIntは、253 − 1 より大きい整数値を表現するために用意された組み込みオブジェクトです。 通常のNumber型で安全に扱える整数の上限は「Number.MAX_SAFE_INTEGER」（9007199254740991 = 253 − 1）までです。これを超える数値をNumber型で扱うと、計算誤差や精度の低下が発生してしまいます。そこで活躍するのがBigIntです。数値リテラルの末尾に「n」を付けるか、BigInt()関数を使用することで、どれほど巨大な整数でも正確に表現・演算できます。 以下は、JavaScriptでBigIntを使用する具体的なサンプルコードです。 サンプル