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

JavaScriptクラスにおけるゲッター（getter）とセッター（setter）の使い方

JavaScriptのクラスでは、ゲッター（getter）とセッター（setter）を利用できます。プロパティの値を返す前や設定する前に、何らかの特別な処理を行いたい場合には、ゲッターとセッターを使うのが賢明な設計です。クラスにこれらを追加するには、getキーワードとsetキーワードを使用します。

getキーワードとは

getは、プロパティの値を取得する際に実行されるメソッドを定義します。通常の関数として呼び出すのではなく、普通のプロパティのようにアクセスできる点が大きな特徴です。

setキーワードとは

setは、プロパティに値を代入する際に自動的に呼び出されるメソッドを定義します。値を保存する前に検証や変換といった処理を挟むことが可能です。

サンプルコード

<html>
<body>
<p id="method"></p>
<script>
    class Company {
        constructor(brand) {
            this.Compname = brand;
        }
        get name() {
            return this.Compname;
        }
        set name(x) {
            this.Compname = x;
        }
    }
    myName = new Company("Tutorialspoint");
    document.getElementById("method").innerHTML = myName.Compname;
</script>
</body>
</html>

コードの解説

この例では、Companyクラスを定義しています。コンストラクタが引数brandを受け取り、内部プロパティthis.Compnameに格納します。get name()はCompnameの値を返し、set name(x)は新しい値をCompnameに設定します。

その後、new Company("Tutorialspoint")でインスタンスを生成し、document.getElementById()を使ってページ上に会社名を表示しています。

実行結果

Tutorialspoint
  1. JavaScriptの分割代入を使った関数パラメータの受け渡し方法

    JavaScriptでは、関数にオブジェクトを引数として渡す際、「分割代入（デストラクチャリング）」と呼ばれる構文を利用することで、オブジェクトの各プロパティを個別の変数として受け取ることができます。 さらに、各プロパティにデフォルト値を指定しておけば、対応するプロパティが存在しない場合でもエラーにならず、あらかじめ設定した値が使用されます。これにより、安全で柔軟な関数設計が可能になります。 サンプルコード 以下は、分割代入を使って関数のパラメータを受け取るJavaScriptのコード例です。 <!DOCTYPE html> <html lang="en&quo

  2. 【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法

    JavaScriptにおけるインポートとエクスポートの名前変更とはJavaScriptのESモジュールでは、asキーワードを使うことで、エクスポートやインポートの際に関数や変数に別名を付けることができます。モジュール側の元の名前はそのまま維持しながら、利用する側では分かりやすい名前で扱えるため、コードの可読性と保守性が向上します。注意：このサンプルを実行するには、ローカルホストサーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーの制限によりモジュールの読み込みが失敗する場合があるためご注意ください。コード例index.html<!DOCTYPE html>