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

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

JavaScriptでは、オブジェクトのプロパティとして関数（メソッド）を後から動的に追加することができます。ここでは、ドット記法を使ってオブジェクトにメソッドを追加し、それを呼び出してアクセスする方法を紹介します。

基本的な考え方

JavaScriptのオブジェクトは「プロパティ」と「メソッド」で構成されます。プロパティが値を保持するのに対し、メソッドは関数として定義され、オブジェクトの操作や処理を行います。既存のオブジェクトに新しいメソッドを追加するには、次のようにドット記法で関数を代入します。

obj.メソッド名 = function() { ... };

メソッド内では this キーワードを使用することで、そのメソッドが属するオブジェクト自身のプロパティにアクセスできます。

コード例

以下は、JavaScriptオブジェクトにメソッドを追加し、アクセスする具体的なコード例です。

<!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 {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>JavaScriptオブジェクトメソッドの追加とアクセス</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CHECK</button>
<h3>上のボタンをクリックすると、オブジェクトへのメソッド追加とアクセスが実行されます。</h3>
<script>
   let resEle = document.querySelector(".result");
   let obj = {
      firstName:'Rohan',
      lastName: 'Sharma',
      Age:'22',
   }
   document.querySelector(".Btn").addEventListener("click", () => {
      obj.welcome = function(){return 'Welcome '+this.firstName+' '+this.lastName};
      resEle.innerHTML = 'welcomeメソッドの追加 : ' + obj.welcome + '';
      resEle.innerHTML += 'welcomeメソッドへのアクセス : ' + obj.welcome() + '';
   });
</script>
</body>
</html>

コードの解説

  • まず、firstName、lastName、Age の3つのプロパティを持つオブジェクト obj を定義しています。
  • ボタンがクリックされると、obj.welcome = function(){...} によって、新しいメソッド welcome がオブジェクトに動的に追加されます。
  • メソッド内の this.firstName や this.lastName は、obj 自身のプロパティを参照しています。
  • obj.welcome と書くと関数そのものが表示され、obj.welcome() と括りをつけて呼び出すことで、戻り値（ウェルカムメッセージ）が表示されます。

実行結果

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

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

「CHECK」ボタンをクリックすると、次のようにメソッドの追加内容と実行結果が出力されます。

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

まとめ

このように、JavaScriptのオブジェクトは作成後でも自由にメソッドを追加できます。ドット記法で関数を代入するだけで新しいメソッドが定義でき、this を使えば同じオブジェクト内の他のプロパティにも簡単にアクセス可能です。オブジェクト指向プログラミングの基本となる重要なテクニックなので、ぜひ覚えておきましょう。

  1. JavaScriptで別のオブジェクトを介してオブジェクトにアクセスする方法

    JavaScriptでは、あるオブジェクトを定義する際に、別のオブジェクトのプロパティやメソッドを参照することで、その値を取得したり、メソッドの実行結果を利用したりすることができます。この記事では、既存のオブジェクト（obj）を介して、新しいオブジェクト（obj2）からプロパティやメソッドにアクセスする方法を、具体的なコード例とともに解説します。押さえておきたいポイントオブジェクトリテラルの中で obj.lastName のように記述すると、その時点での値が新しいオブジェクトにコピーされます。obj.welcome() のようにメソッド名の後に括弧を付けると、オブジェクト定義時にメソッドが即座

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

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