JavaScript オブジェクト アクセサー
JavaScript アクセサー (Getter および Setter)
ECMAScript 5 (ES5 2009) では、GetterとSetterが導入されました。
ゲッターとセッターを使用すると、オブジェクト アクセサー (計算されたプロパティ) を定義できます。
JavaScript Getter (get キーワード)
この例では、langプロパティを使用してlanguageプロパティの値をgetしています。
例
// オブジェクトを作成する
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// ゲッターを使ってオブジェクトのデータを表示する
document.getElementById("demo").innerHTML = person.lang;
JavaScript セッター (set キーワード)
この例では、langプロパティを使用してlanguageプロパティの値をsetしています。
例
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// セッターを使ってオブジェクトのプロパティを設定する
person.lang = "en";
// オブジェクトのデータを表示する
document.getElementById("demo").innerHTML = person.language;
JavaScript 関数またはゲッター?
これら2つの例の違いは何ですか?
例 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// メソッドを使用してオブジェクトのデータを表示します
document.getElementById("demo").innerHTML = person.fullName();
例 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " + this.lastName;
}
};
// ゲッターを使ってオブジェクトのデータを表示する
document.getElementById("demo").innerHTML = person.fullName;
例 1 関数として fullName にアクセスします: person.fullName()。
例 2 プロパティとして fullName にアクセスします: person.fullName。
2 番目の例は、より単純な構文を示しています。
データ品質
JavaScriptは、getterとsetterを使用する場合により高いデータ品質を確保できます。
この例ではlangプロパティを使用すると、languageプロパティの値を大文字で返します。
例
// オブジェクトを作成する
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// ゲッターを使ってオブジェクトのデータを表示する
document.getElementById("demo").innerHTML = person.lang;
を使用してlangプロパティは、この例では大文字の値をlanguage財産：
例
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// セッターを使ってオブジェクトのプロパティを設定する
person.lang = "en";
// オブジェクトのデータを表示する
document.getElementById("demo").innerHTML = person.language;
ゲッターとセッターを使用する理由
- より単純な構文を提供します。
- プロパティとメソッドの同等の構文を許可します。
- より良いデータ品質を確保できます。
- 舞台裏で何かをするのに便利です。
Object.defineProperty()
のObject.defineProperty()メソッドを使用して、GetterとSetterを追加することもできます。
反例
// オブジェクトの定義
const obj = {counter : 0};
// セッターとゲッターの定義
Object.defineProperty(obj, "reset", {
get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
set : function (value) {this.counter -= value;}
});
// カウンターで遊ぶ
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。