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

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

JavaScriptオブジェクトへのメソッド追加方法

JavaScriptオブジェクトにメソッドを追加するのは、オブジェクトコンストラクター自体にメソッドを定義するよりもはるかに簡単です。すでに生成済みのオブジェクトに対して、新しいプロパティとして関数を代入するだけで、その関数をメソッドとして利用できるようになります。

基本的な仕組み

オブジェクトをインスタンス化した後でも、「オブジェクト名.メソッド名 = function() { ... }」という形式でメソッドを後から追加できます。このとき、関数内部ではthisキーワードを使用することで、そのオブジェクト自身のプロパティへアクセスできます。

コード例

次の例では、まず「Business」というオブジェクト型（コンストラクター）を作成し、続けてそのプロパティを定義しています。プロパティの作成が完了した後、各オブジェクトに「det」というメソッドを個別に割り当て、そのメソッドを通じて必要なプロパティの値を取得・表示しています。

<html>
<body>
<p id="prop"></p>
<script>
   function Business(name, property, age, designation) {
      this.Name = name;
      this.prop = property;
      this.age = age;
      this.designation = designation;
   }
   var person1 = new Business("Trump", "$28.05billion", "73", "President");
   var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepreneur");
   person1.det = function() {
      return this.Name + " has a property of net worth " + this.prop;
   };
   person2.det = function() {
      return this.Name + " has a property of net worth " + this.prop;
   };
   document.write(person2.det() + " and " + person1.det());
</script>
</body>
</html>

実行結果

Jackma has a property of net worth $35.6 billion and Trump has a property of net worth $28.05billion

補足：prototypeを使った効率的なメソッド追加

上記のように個々のインスタンスへ直接メソッドを追加すると、インスタンスごとに関数が複製されてしまいます。複数のインスタンス間で同じメソッドを共有したい場合は、コンストラクターのprototypeにメソッドを定義するのが一般的で効率的な手法です。

Business.prototype.det = function() {
   return this.Name + " has a property of net worth " + this.prop;
};

この方法を採用すれば、すべてのインスタンスから共通のメソッドを呼び出せるようになり、メモリの使用量も抑えられます。用途に応じて、インスタンス単位での追加とprototypeによる定義を使い分けるとよいでしょう。

  1. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum

  2. JavaScriptでインポートしたオブジェクトを分割代入（デストラクチャリング）する方法

    JavaScriptでは、ESモジュールからインポートしたオブジェクトに対して分割代入（デストラクチャリング）を使うことで、必要なプロパティだけを個別の変数として簡潔に取り出すことができます。ここでは、import で読み込んだオブジェクトを分割代入する具体的な手順とコード例を紹介します。 ポイント：分割代入の基本構文 オブジェクトの分割代入は、次のように波括弧 { } の中に取り出したいプロパティ名を並べて記述します。let {プロパティ1, プロパティ2, プロパティ3} = オブジェクト;この構文は、インポートされたデフォルトエクスポートのオブジェクトにもそのまま適用できます。 コード例