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

JavaScriptでオブジェクトにプロパティとメソッドを追加する方法【prototypeの使い方】

JavaScriptでオブジェクトに新しいプロパティやメソッドを追加するには、prototype（プロトタイプ）プロパティを使用します。prototypeを活用すると、コンストラクタ関数から生成されたすべてのインスタンスに対して共通の機能を後から定義でき、コードの再利用性やメモリ効率の向上にもつながります。

prototypeプロパティの基本的な使い方

次のサンプルコードでは、bookというコンストラクタ関数を定義し、その後book.prototype.priceによってpriceプロパティを追加しています。さらに、個別のオブジェクト（ここではmyBook）に対して値を代入することで、動的にプロパティを設定できます。

<html>
   <head>
      <title>JavaScript prototype property</title>
      <script>
         function book(title, author) {
            this.title = title;
            this.author = author;
         }
      </script>
   </head>
   <body>
      <script>
         var myBook = new book("Amit", "Java");
         book.prototype.price = null;
         myBook.price = 500;

         document.write("Book title is : " + myBook.title + "<br>");
         document.write("Book author is : " + myBook.author + "<br>");
         document.write("Book price is : " + myBook.price + "<br>");
      </script>
   </body>
</html>

実行結果

上記のコードを実行すると、ブラウザには以下のように表示されます。

Book title is : Amit
Book author is : Java
Book price is : 500

ポイント解説

  • book.prototype.price = null; — book型のすべてのインスタンスが共有するpriceプロパティを初期化しています。
  • myBook.price = 500; — 特定のインスタンスにのみ値を設定しています。
  • メソッドを追加する場合は、book.prototype.getSummary = function() { ... } のように関数を代入します。

補足：ES6のクラス構文との関係

近年のJavaScriptでは、class構文を使うことで、プロパティやメソッドをより直感的に定義できます。ただし、すでに存在するコンストラクタ関数に後から機能を追加したい場合や、複数のインスタンスでメソッドを共有したい場合には、今回のようにprototypeを操作する方法が今なお有効です。仕組みを理解しておくと、JavaScriptのオブジェクト指向プログラミング全体の理解も深まります。

  1. JavaScriptオブジェクトにメソッドを追加・アクセスする方法をわかりやすく解説

    JavaScriptでは、オブジェクトのプロパティとして関数（メソッド）を後から動的に追加することができます。ここでは、ドット記法を使ってオブジェクトにメソッドを追加し、それを呼び出してアクセスする方法を紹介します。基本的な考え方JavaScriptのオブジェクトは「プロパティ」と「メソッド」で構成されます。プロパティが値を保持するのに対し、メソッドは関数として定義され、オブジェクトの操作や処理を行います。既存のオブジェクトに新しいメソッドを追加するには、次のようにドット記法で関数を代入します。obj.メソッド名 = function() { ... };メソッド内では this キーワードを

  2. JavaScriptで既存のオブジェクトにプロパティとメソッドを追加する方法

    JavaScriptのオブジェクトは動的な性質を持っており、一度作成した後でも、いつでも新しいプロパティやメソッドを追加できます。最もシンプルな方法は、ドット記法（オブジェクト名.プロパティ名）を使って値を代入することです。プロパティに関数を代入すれば、それがそのままメソッドとして機能します。 基本的な書き方 object.newProperty = value; object.newMethod = function() {   // 処理 }; サンプルコード 以下は、既存の student オブジェクトにプロパティとメソッドを追加し、その内容を画面に表示する完全な例で