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

JavaScriptでオブジェクトの関数プロパティをメソッドとして呼び出す方法

JavaScriptで関数をメソッドとして扱う方法

JavaScriptのオブジェクトは、複数のプロパティ（キーと値のペア）によって構成されています。そして、値として関数を持つプロパティは「メソッド」と呼ばれ、オブジェクト名.メソッド名() の形式で呼び出すことができます。

プロパティをメソッドとして利用するには、対象のプロパティに関数を定義し、その関数の中でオブジェクト自身の他のプロパティを参照するだけです。このとき重要な役割を果たすのが this キーワードです。

thisキーワードのポイント

メソッド内で使用される this は、そのメソッドが属するオブジェクト自身を指します。したがって、this.firstName のように記述することで、同じオブジェクト内の別のプロパティへ簡単にアクセスできます。

次の例では、「employee」というオブジェクトを作成し、「firstName」「lastName」「Designation」といったプロパティを設定しています。さらに「fullName」プロパティに関数を定義し、その中で this.firstName と this.lastName を組み合わせて氏名を返すようにしています。employee.fullName() を呼び出すと、従業員のフルネームが出力されます。

例1：従業員オブジェクトのメソッド

<html>
<body>
<script type="text/javascript">
    var employee = {
        firstName: "raju",
        lastName : "nayak",
        Designation : "Engineer",
        fullName : function() {
            return this.firstName + " " + this.lastName;
        }
    };
    document.write(employee.fullName());
</script>
</body>
</html>

出力結果

raju nayak

このように、メソッドを呼び出すだけで、オブジェクトが持つ複数のプロパティを組み合わせた結果を取得できます。

例2：文字列を組み立てて返すメソッド

メソッドは単純な値の連結だけでなく、複数のプロパティを使って文章を組み立てることにも活用できます。次の例では、「student」オブジェクトの「details」メソッドが、名前と出席番号を組み合わせた説明文を返しています。

<html>
<body>
<script type="text/javascript">
    var student = {
        Name: "susan",
        country : "USA",
        RollNo : "5",
        details : function() {
            return "the student named" + " " + this.Name + " " +
                   "is allocated with rollno " + " " + this.RollNo;
        }
    };
    document.write(student.details());
</script>
</body>
</html>

出力結果

the student named susan is allocated with rollno 5

まとめ

オブジェクトのプロパティに関数を定義すれば、それがそのままメソッドとして機能します。メソッド内では this を使ってオブジェクト自身のプロパティにアクセスできるため、データと処理をひとつのオブジェクトにまとめて管理できます。これはJavaScriptにおけるオブジェクト指向プログラミングの基本的かつ重要な考え方です。

  1. JavaScriptで関数を「関数」として呼び出す方法と「メソッド」として呼び出す方法の違い

    JavaScriptでは、同じ関数でも呼び出し方によって「関数としての呼び出し」と「メソッドとしての呼び出し」という2つの使い方ができます。この2つの大きな違いは、関数内でthisが何を参照するかという点にあります。 2つの呼び出し方の違い 関数としての呼び出し：関数名を直接記述して呼び出します（例：add(2, 3)）。この場合、thisはグローバルオブジェクト（ブラウザ環境ではwindow）を参照します。 メソッドとしての呼び出し：オブジェクトのプロパティ経由で呼び出します（例：obj.welcome()）。この場合、thisはそのオブジェクト自身を参照するため、オブジェクトが持つプロパ

  2. JavaScriptでプロパティにアクセスする3つの方法｜ドット記法・角括弧・分割代入の使い分け

    JavaScriptでオブジェクトのプロパティにアクセスする3つの方法 JavaScriptには、オブジェクトが持つプロパティ（キーと値のペア）を参照するための方法が主に3つあります。どれも同じ値を取得できますが、それぞれ特徴や向いている場面が異なるため、正しく使い分けられるとコードの可読性と保守性が大きく向上します。 ドット記法：object.property 角括弧記法：object[property] 分割代入：let {property} = object 1. ドット記法（object.property） 最もシンプルで読みやすい記法です。obj.a のようにピリオドでつなぐだけ