作者：Dr.AxelRauschmayer译者：前端小智洗碗的智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。RonBuckton的ECMAScript提案“ClassStaticInitializationBlocks”正处于第四阶段，计划包含在ECMAScript2022中。为了创建类的实例，JavaScript中有两种结构：字段：创建（并可选地初始化）实例特性。构造函数：在设置完成之前执行的代码块。对于类静态部分的设置，我们只有静态字段。ECMAScript建议为类引入静态初始化块，它对静态类的作用大致与构造函数对实例的作用相同。1.为什么类中需要静态块？在设置静态字段时，使用外部函数通常也能很好地工作：staticenglishWords=extractEnglish(this.translations);staticgermanWords=extractGerman(this.translations);}functionextractEnglish(translations){returnObject.keys(translations);}functionextractGerman(translations){returnObject.values(translations);}使用外部函数extractEnglish()和extractGerman()在这种情况下工作得很好，因为我们可以看到它们是从类内部调用的，并且它们完全独立于类。如果我们想同时设置两个静态字段，事情就变得不那么优雅了。classTranslator{statictranslations={yes:'ja',no:'nein',maybe:'vielleicht',};静态英语单词=[];静态germanWords=[];static_=initializeTranslator(//(A)this.translations,this.englishWords,this.germanWords);}functioninitializeTranslator(translations,englishWords,germanWords){for(const[english,german]ofObject.entries(translations))}{englishWords.push(英语);germanWords.push（德语）；这一次，有几个问题。调用initializeTranslator()是一个额外的步骤，要么在创建类之后，要么在类外执行。或者通过变通方法（A行）来实现。initializeTranslator()无法访问翻译器的私有数据。使用建议的静态块（A行），我们有一个更优雅的解决方案。classTranslator{statictranslations={yes:'ja',no:'nein',maybe:'vielleicht',};静态英语单词=[];静态germanWords=[];static{//(A)for(const[english,german]ofObject.entries(this.translations)){this.englishWords.push(english);this.germanWords.push（德语）；}}}2.在JavaScript中实现枚举的更复杂示例一种方法是通过超类EnumclassEnum{staticcollectStaticFields(){//静态方法不可枚举，因此将被忽略this.enumKeys=Object.keys(this);}}classColorEnumextendsEnum{staticred=Symbol('red');staticgreen=Symbol('绿色');staticblue=Symbol('蓝色');static_=this.collectStaticFields();//(A)staticlogColors(){for(constenumKeyofthis.enumKeys){//(B)console.log(enumKey);}}}ColorEnum.logColors();//Output://'red'//'green'//'blue'我们需要收集静态字段，以便我们可以迭代枚举项的键（行B）.这是创建所有静态字段后的最后一步。我们再次使用变通方法（A行），静态块会更优雅。3.细节静态块的具体内容比较符合逻辑（相比之下，实例成员的规则更复杂）：每个类可以有多个静态块。静态块的执行与静态字段初始值设定项的执行交织在一起。超类的静态成员在子类的静态成员之前执行。以下代码显示了这些规则：classSuperClass{staticsuperField1=console.log('superField1');static{assert.equal(this,SuperClass);console.log('staticblock1SuperClass');}staticsuperField2=console.log('superField2');static{console.log('staticblock2SuperClass');}}classSubClassextendsSuperClass{staticsubField1=console.log('subField1');static{assert.equal(this,SubClass);console.log('staticblock1SubClass');}staticsubField2=console.log('subField2');static{console.log('staticblock2SubClass');}}//Output://'superField1'//'staticblock1SuperClass'//'superField2'//'staticblock2SuperClass'//'subField1'//'staticblock1SubClass'//'subField2'//'staticblock2SubClass'4.在引擎中支持类静态块V8：在v9.4.146中未标记（来源）SpiderMonkey：在v92中标记后，意图在v93中未标记（来源）TypeScript：v4.4（来源）5。JS是否变得太像Java和/或变得一团糟？这是一个不与其他功能竞争的小功能。我们已经可以通过static_=...字段运行静态代码。静态块意味着不再需要此解决方法。除此之外，类只是JavaScript程序员腰带上的众多工具之一。我们中的一些人使用它，另一些人不使用它，而且有很多选择。即使是使用类的JS代码也经常使用函数并且趋向于轻量级。6.小结类的静态块是一个比较简单的功能，它完成了一个类的静态功能。粗略地说，它是实例构造函数的静态版本。它主要在我们需要设置多个静态字段时有用。~最后，我是碗志、李志等，退休后想回家摆地摊。下次见！代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://2ality.com/2021/09/cl...交流有梦想，有干货，微信搜索【大动作走向世界】关注这位还在早期洗碗的洗碗智慧早晨。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
