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

JavaScriptのget（ゲッター）でメソッドをプロパティのようにアクセスする方法

JavaScriptにはゲッター（getter）という仕組みがあり、オブジェクト内の処理を、あたかもプロパティであるかのようにアクセスできます。この動作を実現するのが「get」キーワードです。本記事では、その基本的な使い方をサンプルコードとともにわかりやすく解説します。

ゲッターの基本構文

ゲッターは、オブジェクトリテラルの中で get プロパティ名() { ... } という形式で定義します。通常のメソッドとの大きな違いは、呼び出し側で括弧 () を付けずに、普通のプロパティを読み取るように記述できる点です。これにより、計算結果や加工済みのデータをシンプルに取得でき、コードの可読性が向上します。

例1：関数として呼び出した場合（意図しない結果になる）

次の例では、ゲッターとして定義した「details」を、関数のように「details()」と括弧付きで呼び出しています。この書き方ではゲッターが正しく評価されず、期待した結果は得られません。

<html>
<body>
<p id = "prop"></p>
<script>
    var business = {
        product: "Tutorix",
        parent : "Tutorialspoint",
        get details() {
            return this.product+" is the product of" + " " + this.parent;
        }
    };
    document.getElementById("prop").innerHTML = business.details();
</script>
</body>
</html>

例2：プロパティとしてアクセスした場合（正しい使い方）

続く例では、括弧を外して「business.details」と記述しています。「get」キーワードが付いているため、「details」は関数ではなくプロパティとして扱われ、ゲッター内の処理が自動的に実行されて文字列が返されます。

<html>
<body>
<p id = "prop"></p>
<script>
    var business = {
        product: "Tutorix",
        parent : "Tutorialspoint",
        get details() {
            return this.product+" is the product of" + " " + this.parent;
        }
    };
    document.getElementById("prop").innerHTML = business.details;
</script>
</body>
</html>

実行結果

ブラウザには次の文字列が表示されます。

Tutorix is the product of Tutorialspoint

まとめ

「get」キーワードを使ったゲッターは、メソッドをプロパティのように扱える便利な構文です。アクセス時には括弧を付けない点に注意しましょう。ゲッターを活用すれば、内部の複雑な処理を隠蔽しながら、直感的で読みやすいプロパティアクセスを実現できます。

  1. JavaScriptのforループを使って空のオブジェクトにプロパティを設定する方法

    JavaScriptでは、for...inループを使うことで、既存のオブジェクトから空のオブジェクトへプロパティを簡単にコピーできます。以下に、forループを使用して空のオブジェクトにプロパティを設定するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,

  2. lengthプロパティを使わずにノードリストから最後の要素を取得する方法【jQueryの:lastセレクタ】

    JavaScriptでノードリストやDOM要素のコレクションから最後のアイテムを取得する場合、一般的には length プロパティで要素数を調べてインデックスを指定します。しかし、jQueryの :last セレクタを使えば、要素数を意識することなく、よりシンプルに最後の要素を取得できます。 サンプルとなるテーブル ここでは、次のようなHTMLテーブルを例に説明します。 <table id=demo border=1> <tr> <td>John</td> </tr> <tr> <td>David</td