关于javascript:精读class-static-block

class-static-block 提案于 2021.9.1 进入 stage4，是一个基于 Class 加强的提案。

本周咱们联合 ES2022 feature: class static initialization blocks 这篇文章一起讨论一下这个个性。

为什么咱们须要 class static block 这个语法呢？其中一个起因是对 Class 动态变量的灵便赋值需要。以上面为例，咱们想在 Class 外部对动态变量做批量初始化，就不得不写一个无用的 _ 变量用来做初始化的逻辑：

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 写在里面呢？就因为在 Class 外部不能写代码块，但这造成一个重大的问题，是内部函数无法访问 Class 外部属性，所以须要做一堆干燥的传值。

从这个例子看出，咱们为了自定义一段动态变量初始化逻辑，须要做出两个斗争：

在内部定义一个函数，并承受大量 Class 成员变量传参。
在 Class 外部定义一个无意义的变量 _ 用来启动这个函数逻辑。

这切实太没有代码谋求了，咱们在 Class 外部做掉这些逻辑不就简洁了吗？这就是 class static block 个性：

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);
    }
  }
}

能够看到，static 关键字前面不跟变量，而是间接跟一个代码块，就是 class static block 语法的特色，在这个代码块外部，能够通过 this 拜访 Class 所有成员变量，包含 # 公有变量。

原文对这个个性应用介绍就完结了，最初还提到一个细节，就是执行程序。即所有 static 变量或区块都按程序执行，父类优先执行：

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'

所以 Class 内容许有多个 class static block，父类和子类也能够有，不同执行程序后果必定不同，这个选择权交给了使用者，因为执行程序和书写程序统一。

联合提案来看，class static block 还有一个动机，就是给了一个拜访公有变量的机制：

let getX;

export class C {
  #x
  constructor(x) {this.#x = { data: x};
  }

  static {
    // getX has privileged access to #x
    getX = (obj) => obj.#x;
  }
}

export function readXData(obj) {return getX(obj).data;
}

实践上内部无论如何都无法访问 Class 公有变量，但下面例子的 readXData 就能够，而且不会运行时报错，起因就是其整个流程都是非法的，最重要的起因是，class static block 能够同时拜访公有变量与全局变量，所以能够利用其做一个“内外夹攻”。

不过我并不感觉这是一个好点子，反而像一个 “BUG”，因为任何对规定的冲破都会为可维护性埋下隐患，除非这个个性用在稳固的工具、框架层，用来做一些便利性工作，最终晋升了利用编码的体验，这种用法是能够承受的。

最初要意识到，class static block 实质上并没有减少新性能，咱们齐全能够用一般动态变量代替，只是写起来很不天然，所以这个个性能够了解为对缺点的补充，或者是语法欠缺。

总的来说，class static block 在 Class 内创立了一个块状作用域，这个作用域内领有拜访 Class 外部公有变量的特权，且这个块状作用域仅在引擎调用时初始化执行一次，是一个比拟不便的语法。

原文下方有一些拥护声音，说这是对 JS 的复杂化，也有诸如 JS 越来越像 Java 的声音，不过我更同意作者的观点，也就是 Js 中 Class 并不是全副，当初越来越多代码应用函数式语法，即使应用了 Class 的场景也会存在大量函数申明，所以 class static block 这个提案对开发者的感知实际上并不大。

探讨地址是：精读《class static block》· Issue #351 · dt-fe/weekly

如果你想参加探讨，请点击这里，每周都有新的主题，周末或周一公布。前端精读 – 帮你筛选靠谱的内容。

关注 前端精读微信公众号

版权申明：自在转载 - 非商用 - 非衍生 - 放弃署名（创意共享 3.0 许可证）

关于javascript:精读class-static-block

概述

精读

总结