ES6 JavaScript でのクラスの get および set の使用例

この記事では、ES6 JavaScript でのクラスの get と set の使用法を具体的な例に基づいて紹介します。必要な方は参考にしていただければ幸いです。 。

ES5 と同様に、クラス内で get キーワードと set キーワードを使用して、特定の属性のストレージ関数と値関数を設定し、属性のアクセス動作を傍受できます。

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: ' + value);
  }
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'

上記のコードでは、prop 属性に対応するストレージ関数と値関数があるため、代入と読み取りの動作がカスタマイズされています。

属性の記述子オブジェクトにストレージ関数と値関数を設定します。

class CustomHTMLElement {
  constructor(element) {
    this.element = element;
  }
  get html() {
    return this.element.innerHTML;
  }
  set html(value) {
    this.element.innerHTML = value;
  }
}
var descriptor = Object.getOwnPropertyDescriptor(
  CustomHTMLElement.prototype, "html");
"get" in descriptor // true
  "set" in descriptor // true

上記のコードでは、html 属性の description オブジェクトに storage 関数と value 関数が定義されており、ES5 と完全に一致しています。

関連する推奨事項:

関数 get および set の使用方法を説明する例

ES6 が Set データ構造を使用して配列を操作する方法

mysql でオフセットが大きすぎる場合の SQL 最適化例の共有ページネーションされています

以上がES6 JavaScript でのクラスの get および set の使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。