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

JavaScriptの.prototypeとは？仕組みと使い方をわかりやすく解説

JavaScriptでは、すべてのオブジェクトがプロトタイプ（prototype）からプロパティやメソッドを継承します。これはJavaScriptのオブジェクト指向を実現する中核的な仕組みであり、.prototypeの理解は効率的なコード設計に欠かせません。

プロトタイプ継承の基本

JavaScriptでオブジェクトを作成すると、そのオブジェクトは自動的に対応するプロトタイプオブジェクトを参照するようになります。主な例は以下の通りです。

  • new Object() で生成したオブジェクト → Object.prototype を継承
  • new Date() で生成したオブジェクト → Date.prototype を継承
  • コンストラクタ関数から new で生成したオブジェクト → そのコンストラクタの .prototype を継承

つまり、オブジェクト自身が持っていないプロパティやメソッドにアクセスしようとした場合、JavaScriptエンジンは自動的にプロトタイプチェーンをたどって該当するものを探し出します。これにより、複数のオブジェクト間で同じメソッドを共有でき、メモリの節約にもつながります。

サンプルコード：コンストラクタ関数とprototype

以下の例では、Departmentというコンストラクタ関数を定義し、newキーワードを使って新しいオブジェクトを生成しています。このとき生成されたmyDeptオブジェクトは、Department.prototypeを継承します。

<!DOCTYPE html>
<html>
   <body>
      <h2>部署情報</h2>
      <p id="details"></p>
      <script>
         function Department(myid, name, section) {
            this.id = myid;
            this.name = name;
            this.section = section;
         }
         var myDept = new Department("AKD", "Marketing", "North");
         document.getElementById("details").innerHTML =
            "部署名は " + myDept.name + "、担当区域は "
            + myDept.section+ " です。";
      </script>
   </body>
</html>

コードの解説

このコードの流れを順番に見ていきましょう。

  1. コンストラクタ関数の定義：Department関数は、thisキーワードを使ってid・name・sectionの3つのプロパティを初期化します。
  2. インスタンスの生成：new Department(...)を実行すると、新しい空のオブジェクトが作成され、その内部プロパティ（[[Prototype]]）がDepartment.prototypeを指すようになります。その後、コンストラクタ関数が実行されてプロパティが設定されます。
  3. 画面への表示：document.getElementById()で取得した要素のinnerHTMLに、生成したオブジェクトのプロパティ値を組み込んだ文字列を設定しています。

実行結果として、ページには「部署名は Marketing、担当区域は North です。」と表示されます。

prototypeにメソッドを追加するメリット

さらに実践的な使い方として、Department.prototypeにメソッドを追加する方法があります。

Department.prototype.getInfo = function() {
  return this.name + "（" + this.section + "）";
};

console.log(myDept.getInfo()); // "Marketing（North）"

このように.prototypeへメソッドを定義すると、同じコンストラクタから生成されたすべてのインスタンスがそのメソッドを共有できます。各インスタンスごとに関数のコピーを持たせる必要がないため、メモリ効率が良く、後から機能を追加・変更する際も柔軟に対応できるのが大きな利点です。

  1. JavaScriptでJSON配列を反復処理する方法

    JavaScriptでJSON配列を反復処理するには、JSON.parse()メソッドを使用します。特に、APIから取得した文字列形式のJSONデータを配列として扱う場合、各要素を実際のオブジェクトへ変換してから操作するのが一般的なアプローチです。サンプルコード以下は、文字列形式のJSONデータが格納された配列に対してmap()メソッドと組み合わせてJSON.parse()を使い、各要素をJSONオブジェクトへ変換するコード例です。var apiValues =    [       {name: John, scores: [78, 89]}

  2. Pythonの辞書keys()メソッドとは？使い方と動作の仕組みをわかりやすく解説

    Pythonの辞書（dict）クラスが提供するkeys()メソッドは、辞書に登録されているすべてのキーを含む「ビューオブジェクト」を返します。このメソッドを使えば、辞書内のキーを簡単に一覧形式で取得できます。keys()メソッドの基本的な使い方次の例では、学生情報を格納した辞書に対してkeys()メソッドを呼び出しています。>>> d1 = {'name': 'Ravi', 'age': 21, 'marks': 60, 'course': 'Computer Engg'}>