[[436293]]

Ron Buckton 提出的 ECMAScript 提案 "類靜態初始化塊"已進入第四階段，計劃納入ECMAScript 2022。

為了建立一個類的實例,在JavaScript中有兩個結構:

字段：創建(可選擇初始化)實例屬性。

構造函數:在 setup 完成之前執行的代碼塊。

對于類的靜態部分的設置，我們只有靜態字段。ECMAScript建議為類引入靜態初始化塊，大致上，它對靜態類的作用就像構造函數對實例的作用。

1.為什么我們需要類中的靜態塊?

在設置靜態字段時，使用外部函數通常也可以很好地工作：

class Translator { 
  static translations = { 
    yes: 'ja', 
    no: 'nein', 
    maybe: 'vielleicht', 
  }; 
  static englishWords = extractEnglish(this.translations); 
  static germanWords = extractGerman(this.translations); 
} 
function extractEnglish(translations) { 
  return Object.keys(translations); 
} 
function extractGerman(translations) { 
  return Object.values(translations); 
} 

使用外部函數 extractEnglish()和 extractGerman() 在這種情況下效果很好，因為我們可以看到它們是從類內部調用的，而且它們完全獨立于類。

如果我們想同時設置兩個靜態字段，事情就變得不那么優雅。

class Translator { 
  static translations = { 
    yes: 'ja', 
    no: 'nein', 
    maybe: 'vielleicht', 
  }; 
  static englishWords = []; 
  static germanWords = []; 
  static _ = initializeTranslator( // (A) 
    this.translations, this.englishWords, this.germanWords); 
} 
function initializeTranslator(translations, englishWords, germanWords) { 
  for (const [english, german] of Object.entries(translations)) { 
    englishWords.push(english); 
    germanWords.push(german); 
  } 
} 

這一次，有幾個問題。

• 調用initializeTranslator()是一個額外的步驟，要么在創建類之后，在類之外執行?；蛘咄ㄟ^一個變通方法來執行(A行)。
• initializeTranslator() 不能訪問 Translator 的私有數據。

通過提出的靜態塊(A行)，我們有更優雅的解決方案。

class Translator { 
  static translations = { 
    yes: 'ja', 
    no: 'nein', 
    maybe: 'vielleicht', 
  }; 
  static englishWords = []; 
  static germanWords = []; 
  static { // (A) 
    for (const [english, german] of Object.entries(this.translations)) { 
      this.englishWords.push(english); 
      this.germanWords.push(german); 
    } 
  } 
} 

2.一個更復雜的例子

在JavaScript中實現枚舉的一種方法是通過帶有輔助功能的超類Enum

class Enum { 
  static collectStaticFields() { 
    // Static methods are not enumerable and thus ignored 
    this.enumKeys = Object.keys(this); 
  } 
} 
class ColorEnum extends Enum { 
  static red = Symbol('red'); 
  static green = Symbol('green'); 
  static blue = Symbol('blue'); 
  static _ = this.collectStaticFields(); // (A) 
 
  static logColors() { 
    for (const enumKey of this.enumKeys) { // (B) 
      console.log(enumKey); 
    } 
  } 
} 
ColorEnum.logColors(); 
 
// Output: 
// 'red' 
// 'green' 
// 'blue' 

我們需要收集靜態字段，以便我們可以遍歷枚舉項的鍵(B行)。這是在創建所有靜態字段之后的最后一步。我們再次使用一個變通方法(A行)，靜態塊會更優雅。

3.詳情

靜態塊的具體內容相對來說是合乎邏輯的(相比之下，實例成員的規則更為復雜)：

• 每個類可以有一個以上的靜態塊。
• 靜態塊的執行是與靜態字段初始化器的執行交錯進行的。
• 超類的靜態成員在子類的靜態成員之前被執行。

下面的代碼展示了這些規則：

class SuperClass { 
  static superField1 = console.log('superField1'); 
  static { 
    assert.equal(this, SuperClass); 
    console.log('static block 1 SuperClass'); 
  } 
  static superField2 = console.log('superField2'); 
  static { 
    console.log('static block 2 SuperClass'); 
  } 
} 
 
class SubClass extends SuperClass { 
  static subField1 = console.log('subField1'); 
  static { 
    assert.equal(this, SubClass); 
    console.log('static block 1 SubClass'); 
  } 
  static subField2 = console.log('subField2'); 
  static { 
    console.log('static block 2 SubClass'); 
  } 
} 
 
// Output: 
// 'superField1' 
// 'static block 1 SuperClass' 
// 'superField2' 
// 'static block 2 SuperClass' 
// 'subField1' 
// 'static block 1 SubClass' 
// 'subField2' 
// 'static block 2 SubClass' 

4.在引擎中支持類靜態塊

• V8: unflagged in v9.4.146 (source)
• SpiderMonkey: behind a flag in v92, intent to ship unflagged in v93 (source)
• TypeScript: v4.4 (source)

5.JS 是否變得太像Java和/或一塌糊涂?

這是一個很小的功能，不會與其他功能競爭。我們已經可以通過 static _ = ... 的字段來運行靜態代碼。靜態塊意味著這種變通方法不再需要了。

除此之外，類只是JavaScript程序員腰帶上的眾多工具之一。我們中的一些人使用它，另一些人不使用它，而且有許多替代方案。即使是使用類的 JS 代碼，也經常使用函數，而且往往是輕量級的。

6.總結

類靜態塊是一個相對簡單的功能，它完善了類的靜態功能。粗略來說，它是實例構造函數的靜態版本。它主要在我們需要設置一個以上的靜態字段時有用。

作者：Dr. Axel Rauschmayer 譯者：前端小智

來源：2ality 原文：https://2ality.com/2021/09/class-static-block.html