ES6 javascript中class類別的get與set用法實例

本文主要介紹了ES6 javascript中class類別的get與set用法,結合具體實例形式分析了ES6中類別的get與set關鍵字使用方法,需要的朋友可以參考下，希望能幫助到大家。

與 ES5 一樣， 在 Class 內部可以使用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屬性有對應的存值函數和取值函數， 因此賦值和讀取行為都被自訂了。

存值函數和取值函數是設定在屬性的 descriptor 物件上的。

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屬性的描述物件上面， 這與 ES5 完全一致。

相關推薦：

實例說明函數get與set使用方法

ES6如何使用Set資料結構操作數組

mysql分頁時offset過大的Sql最佳化實例分享

#

以上是ES6 javascript中class類別的get與set用法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！