簡単な JavaScript パート 8: ゲッターとセッターとは何ですか?

簡単な JavaScript パート 8: ゲッターとセッターとは何ですか?

JavaScript では、ゲッターとセッターについて聞いたことがあるかもしれません。これらが何であるかを見てみましょう。

4min read

まず、セッターを使用してプロパティの値を設定します。セッターは、プロパティの値が変更されるたびに呼び出されます。つまり、setter 関数内で使用されるプロパティが変更されるたびに関数を実行します。次のコードを見てください。

var foo = {
    set cal(x) {
        this.a = x + 5
    },
    a: undefined
}
 
foo.cal = 8;
console.log(foo.a);

オブジェクトfooでは、プロパティaが変更されるたびにsetter calが呼び出されます。出力として、13 が印刷されます。セッターを作成するときは、次のルールに従う必要があります。

  1. セッター名は、文字列または数値のいずれかです。
  2. セッターには、入力パラメーターが 1 つだけ必要です。
  3. オブジェクトには、同じ識別子を持つセッターが 1 つだけ存在する必要があります
  4. delete演算子を使用してセッターを削除できます

セッターの他の例については、次のコードを見てみましょう。

var greet = {
    set welcome(m) {
        this.msg = this.msg + m;
    },
    msg: "Hello "
}
greet.welcome = "Jaosn";
console.log(greet.msg);

上記のコードスニペットを出力として、Hello Jasonが出力されます。Object.definePropertyを使用して、既存のオブジェクトにセッターを追加することもできます。オブジェクトfooがあるとします。

var foo = {
    num: 0
}

既存のオブジェクトfooのセッターを追加するには、 Object.definePropertyを使用します。

Object.defineProperty(foo, 'cal', {
    set: function (x) {
        this.num = this.num + x;
    }
});
foo.cal = 9;
console.log(foo.num); //9

上記では、既存のオブジェクトにセッターを追加しており、出力として9になります。

JavaScript Getter

JavaScript ゲッターを使用すると、プロパティの読み取りを行うたびに関数を呼び出すことができます。したがって、関数を呼び出したい場合、JavaScriptはオブジェクトが検索されるたびにゲッターを使用します。次のコードを考えてみましょう。

var cal = {
    num: 0,
    get add() {
        return this.num + 5;
    }
}
console.log(cal.add);

上記のコードでは、出力はプロパティnumの計算値になります。主に、ゲッターを使用して、動的に計算された値を返すプロパティの値を読み取ります。次の基準でプロパティの値を読み取る必要がある場合:

  1. このプロパティは、動的な計算値を返します
  2. プロパティの内部値は、メソッドを明示的に呼び出さずに反映しないでください

これら 2 つの要件を達成するには、ゲッターを使用する必要があります。以下のコードを考えてみましょう。

var foo = {
    name: 'jason',
    get Name() {
        return this.name + " beres";
    }
}
console.log(foo.Name);

上記のコードでは、getter を使用して name プロパティの値を計算しています。ここでは、出力 jason beresを取得します。

ゲッターを作成するときは、次のルールを覚えておく必要があります。

  1. ゲッター名は、文字列または数値のいずれかです。
  2. ゲッターには入力パラメータがあってはならず、パラメータが正確にゼロでなければなりません。
  3. オブジェクトには、同じ識別子を持つゲッターが1つだけ存在する必要があります
  4. getter は、delete 演算子を使用して削除できます

 

​Object.definePropertyを使用して、既存のオブジェクトにゲッターを追加することもできます。 オブジェクトfooがあるとします。

var foo = {
    num: 1
}

既存のオブジェクトfooの getter を追加するには、Object.definePropertyを使用します。

Object.defineProperty(foo, 'numgetter',
    {
        get: function () {
            return this.num + 1;
        }
    });
console.log(foo.numgetter); //2

上でわかるように、既存のオブジェクトにゲッターを追加しており、出力は2になります。

結論

JavaScript でオブジェクトを操作するには、ゲッターとセッターをよく理解する必要があります。セッターを使用すると、プロパティの値が変更されるたびに関数を呼び出すことができ、ゲッターを使用すると、プロパティの計算値を返すことができます。以上です!

JavaScript /HTML5 とASP.NET MVCのIgnite UIをチェックすることを忘れないでください HTML5、Angular、React、およびASP.NET MVCで使用して、リッチなインターネットアプリケーションを作成できます。すべての JavaScript コントロールの試用版を無料でダウンロードできます。

操作方法
デモを予約