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

JavaScriptのネイティブプロトタイプとは？仕組みと使い方を実例付きで解説

ネイティブプロトタイプとは

JavaScriptはプロトタイプベースの言語であり、「prototype」プロパティはその中核をなす重要な概念です。プロトタイプは、JavaScriptにおいて継承を実現するために使用されます。

ユーザー定義のカスタムオブジェクトだけでなく、String や Array といった組み込み（ネイティブ）オブジェクトもすべて prototype プロパティを持っています。このプロトタイプに新しいプロパティやメソッドを追加することで、既存オブジェクトの機能を自由に拡張できます。

ただし、ネイティブプロトタイプに対して行えるのは「編集」または「追加」のみであり、既存のプロパティやメソッドを削除することはできません。これは標準オブジェクトの安定性と互換性を保つための仕様です。

実装例：String.prototypeに独自メソッドを追加する

以下のコードでは、String.prototype に対して alternateCase という独自メソッドを追加しています。このメソッドは、文字列の偶数番目の文字を大文字に、奇数番目の文字を小文字に変換して返します。

<!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,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>Native Prototypes in JavaScript</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、プロトタイプを使って文字列が交互に大文字・小文字に変換されます
</h3>
<script>
    let resEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let BtnEle = document.querySelector(".Btn");
    String.prototype.alternateCase = function () {
        let newString = "";
        for (let i = 0; i < this.length; i++) {
            if (i % 2 == 0) {
                newString += this[i].toUpperCase();
            }
            else {
                newString += this[i].toLowerCase();
            }
        }
        return newString;
    };
    let a = "HELLO WORLD";
    sampleEle.innerHTML += a;
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML += a.alternateCase();
    });
</script>
</body>
</html>

コードのポイント

  • String.prototype.alternateCase = function() {...} の部分で、組み込みの String オブジェクトに新しいメソッドを定義しています。
  • this は、メソッドを呼び出した文字列インスタンス自身を参照します。
  • ループ内でインデックスが偶数か奇数かを判定し、それぞれ toUpperCase() と toLowerCase() を適用しています。
  • このように拡張されたメソッドは、すべての文字列インスタンスから直接呼び出せるようになります（例：a.alternateCase()）。

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのネイティブプロトタイプとは？仕組みと使い方を実例付きで解説

「CLICK HERE」ボタンをクリックすると、文字列が交互に大文字・小文字へ変換されて表示されます。

JavaScriptのネイティブプロトタイプとは？仕組みと使い方を実例付きで解説

  1. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照

  2. JavaScriptでプロトタイプを変更・上書きする方法

    JavaScriptでは、コンストラクタ関数が持つprototypeプロパティを書き換えることで、そのプロトタイプを継承しているすべてのインスタンスのメソッドを動的に変更できます。既存のメソッドを上書きすると、すでに生成済みのインスタンスにも即座に変更内容が反映されます。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="