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

【初心者向け】JavaScriptのBooleanコンストラクタープロパティの使い方とサンプルコード

Booleanコンストラクタープロパティは、Booleanプロトタイプを生成したコンストラクター関数を返すプロパティです。真偽値からこのプロパティを参照することで、その値がどの関数によって作成されたのかを簡単に確認できます。

ここでは、JavaScriptのBooleanコンストラクタープロパティを使った具体的なコード例を紹介します。ボタンをクリックすると、画面上にコンストラクター関数の内容が表示される仕組みになっています。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1>JavaScript Boolean constructor Property</h1>
<p class="sample"></p>
<button class="btn">CLICK HERE</button>
<h3>Click on the above button to get the boolean constructor function</h3>
<script>
    var bool = true;
    document.querySelector(".btn").addEventListener("click", () => {
        document.querySelector(".sample").innerHTML =
        "The boolean constructor function: <br>" + bool.constructor;
    });
</script>
</body>
</html>

コードの解説

このコードでは、まず変数boolにtrueという真偽値を代入しています。その後、「CLICK HERE」ボタンに対してaddEventListenerでクリックイベントを登録し、ボタンが押されるとbool.constructorの内容がclass属性がsampleの要素内に出力されます。

なお、プリミティブな真偽値に対してconstructorプロパティを参照した場合、内部的には一時的にBooleanラッパーオブジェクトへ変換されるため、function Boolean() { [native code] } という形式の文字列が表示されます。

実行結果

ページを読み込んだ直後の初期状態は以下のようになります。

【初心者向け】JavaScriptのBooleanコンストラクタープロパティの使い方とサンプルコード

続いて、「CLICK HERE」ボタンをクリックしてみましょう。クリック後は、次のようにBooleanコンストラクター関数の情報が画面に表示されます。

【初心者向け】JavaScriptのBooleanコンストラクタープロパティの使い方とサンプルコード

  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  2. JavaScriptのコンストラクターにプロパティやメソッドを追加する方法

    JavaScriptでは、コンストラクター関数に対してprototype（プロトタイプ）を利用することで、後からプロパティやメソッドを追加することができます。この方法で追加したプロパティやメソッドは、そのコンストラクターから生成されたすべてのインスタンスで共有されるため、メモリの面でも効率的です。 サンプルコード 以下は、JavaScriptのコンストラクターにプロパティとメソッドを追加するコード例です。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta n