🔸class field

JS ⟩ class ⟩ definition ⟩ class fields

class fields 指寫在 class definition 中，但在 constructor() 外面的 instance properties。據說這種新語法是為了改良原有的constructor()語法，讓物件屬性更突出、更易於集中管理而設計的做法。

In the context of classes, MDN Web Docs content uses the terms properties and fields interchangeably.

⭐️ 重點

class fields are defined on the instance, not on the prototype.

👉 MDN ⟩ arrow functions used as methods

The class fields are initialized:

• base class: before constructor()

• derived class: immediately after super()

👉 更詳細內容，請看： override class fields

🔴 主題

• arrow function used arrow function as class field❗️.

📗 參考

• JS.info ⟩ class ⟩

  • class fields

  • overriding class fields

📘 手冊

• Public class fields

👥 相關

• override class fields is kind of tricky, watch out❗️

• getter/setter behaves like a normal property.

• static member may not be supported in all browsers.

• can be used as a bound method via arrow function.

• Google Apps Script 目前不支援 class field，但可用 (static/instance) getter/setter 代替。

🗣 討論

• What are "class fields" in JavaScript?

About Google Apps Script Editor:

• How to use static method in google app script

• How to declare Class fields in Google App Script using javascript

• ParseError: Unexpected token = when trying to save in google Apps Script editor [duplicate]

• Google ⟩ Issue Tracker ⟩ static class property not recognised (won't fix)

❓

問：「 Google Apps Script 目前 (2022.05) 不支援 static members，但是支援 class fields 嗎 」❓

答：「 Google Apps Script 不支援的是 class field(不管是 static 還是 instance)，但神奇的是，它竟然支援 (static/instance) methods/getters/setters❗️」

💊 解藥：

因此，我們可以用以下方案解決 GAS 不支援 class field 的問題。

• instance class fields：用 constructor 或用一般的 getters/setters。

• static class fields：用 static getters/setters，如下面的範例。

class X {
   // ⭐️ static getters & setters
   static get a(){ return this._a || 0 }     // this === X
   static set a(value){ this._a = value }    // this === X
}

X.a      // get: 0.0
X.a = 3  // set: 3.0
X.a      // get: 3.0