Accessor methods
get/set 構文でオブジェクトのプロパティにアクセサメソッドを定義できます。プロパティの読み取り・書き込み時にバリデーションや計算を行えます。
概要
get/set 構文でオブジェクトのプロパティにアクセサメソッドを定義できます。プロパティの読み取り・書き込み時にバリデーションや計算を行えます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 1 | |
| ビルトインオブジェクト | ||||||
| _defineSetter_() は Object インスタンスのメソッドで、オブジェクトのプロパティと関数を結び付け、そのプロパティを設定しようとすると呼び出されるようにします。 | 1 | 12 | 1 | 3 | 18 | 1 |
| _lookupGetter_() は Object インスタンスのメソッドで、指定されたプロパティに結びつけられているゲッター関数を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
| _lookupSetter_() は Object インスタンスのメソッドで、指定されたプロパティに結びつけられているセッター関数を返します。 | 1 | 12 | 1 | 3 | 18 | 1 |
注釈 1件
実装メモ
- Firefox 48 以降、このメソッドはグローバルスコープでオブジェクトなしで呼び出すことができなくなりました。そうしないと `TypeError` がスローされます。以前はこのような場合、自動的にグローバルオブジェクトが使用されていましたが、現在はそうではありません。
注釈 1件
実装メモ
- Firefox 48 以降、このメソッドはグローバルスコープでオブジェクトなしで呼び出すことができなくなりました。そうしないと `TypeError` がスローされます。以前はこのような場合、自動的にグローバルオブジェクトが使用されていましたが、現在はそうではありません。
基本構文
JAVASCRIPT
const user = {
firstName: 'Taro',
lastName: 'Yamada',
get fullName() {
return `${this.lastName} ${this.firstName}`;
},
set fullName(value) {
[this.lastName, this.firstName] = value.split(' ');
}
};
user.fullName; // 'Taro Yamada'
user.fullName = 'Hanako Tanaka';ライブデモ
fulne-mu. autosync
and name by 々 to write and, getter to fulne-mu that automaticallyupdate..
プレビュー全画面表示
tax-includedprice. autocalculation
bodyprice sett and, (10%) includeprice automaticallycalculation..
プレビュー全画面表示
実務での使いどころ
-
Accessor methods の活用
オブジェクトのアクセサメソッド（getter/setter）。プロパティアクセス時にカスタムロジックを実行可能。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- JavaScript による動的更新時は、aria-live リージョンで変更をスクリーンリーダーに通知する。
参考リンク
Powered by web-features