马克社区,马克吐温社区,马克java社区围观！我国第一个推进到浏览器标准的 ECMaScript 提案！

围观！我国第一个推进到浏览器标准的 ECMaScript 提案！

以下文章来源于前端很美，作者ginkgo6

在2022年6月22日，第123届Ecma大会批准了ECMAScript 2022语言规范。一起来看看ES13给我们带来了哪些新特性吧。其中最后一个特性，是我国第一个推进到浏览器标准的EcmaScript提案。

1.私有属性和私有方法
之前js中class的一个痛点就是没有私有属性，毕竟封装是面向对象的三大特性，没有私有属性如何实现封装。尽管我们可以用很多方法去曲线实现私有属性比如闭包proxy、weakmap、symbol等等，但是他们各自有各自的缺陷，下面的代码演示其中以_作为命名约定的方式实现私有属性的缺点。

class User {
constructor() {
    // public 属性
    this.name = "Tom";
    // private 属性
    this._lastName = "Brown";
}

getFullName(){
    return `${this.name} ${this._lastName}`
}
}

const user = new User();
user.name
// "Tom"

user._lastName
// "Brown"
// no error thrown, we can access it from outside the class

在构造函数中，我们定义了两个字段，其中一个字段是以_开头的，这是一个命名约定用于将字段声明为私有字段，但是当我们在类外面访问该字段时，并没有引起报错，原因是因为它只是一个命名规范而已。
现在在ES13中，我们可以用更简单的方法声明公共和私有字段，第一，我们不必在构造函数中定义它们了，其次，我们可以通过在字段前面添加#号来定义一个真正的私有字段。

class User {
name = "Tom";
#lastName = "Brown"

getFullName(){
    return `${this.name} ${this.#lastName}`
}
}

const user = new User();
user.name
// "Tom"

user.getFullName();
// "Tom Brown"

user.#lastName
// SyntaxError - cannot be accessed or modified from outside the class
有了这个特性，我们终于可以简单轻松的定义一个真正的私有属性或私有方法了。

2.私有属性检测
当我们尝试访问对象上不存在的私有属性时会报错，所以就需要一种方法来检测对象是否具有某私有属性，此时，我们可以在class中使用in关键字来完成此工作。

class Person {
#name;
constructor(name) {
    this.#name = name;
}
static check(obj) {
    return #name in obj;
}
}

Person.check(new Person()), // true
当然，你可能会发问对于具有相同名称的私有属性的类，in 关键字是否能正常工作，别担心，请参考以下例子，User类和Person类具有相同的私有属性name,in关键字可以正确的区分。

class User {
#name;
constructor(name) {
    this.#name = name;
}
static check(obj) {
    return #name in obj;
}
}

class Person {
#name;
constructor(name) {
    this.#name = name;
}
static check(obj) {
    return #name in obj;
}
}

User.check(new User()),     // true
User.check(new Person()),   // false
Person.check(new Person()), // true
Person.check(new User()),   // false
3. 类静态初始化块(Class Static Block)
类在初始化的时候会执行静态初始化块(Class Static Block)，一个类可以拥有任意个静态初始化块，它们将会按照声明的顺序执行。静态初始块内还可以访问父类的静态属性。

class Dictionary {
static words = [ "yes", "no", "maybe" ];
}

class Words extends Dictionary {
static englishWords = [];
static #localWord = 'ok';
// 第一个静态初始化块
static {

    const words = super.words;
    this.englishWords.push(...words);
}
// 第二个静态初始化块
static {
      this.englishWords.push(this.#localWord);
}
}

console.log(Words.englishWords)
//输出 -> ["yes", "no", "maybe", "ok"]
下面这个例子，我们还可以通过静态初始化块将私有属性暴露出去。

let getClassPrivateField;

class Person {
#privateField;
constructor(value) {
    this.#privateField = value;
}
static {
    getClassPrivateField = (obj) => obj.#privateField;
}
}

getClassPrivateField(new Person('private value'));
4.Regexp Match Indices
之前 ECMAScript 中的「RegExp.prototype.exec」方法的返回值已经提供了对于匹配的捕获组文本与对应的捕获组在正则表达式中的索引。尽管它已经包含输入字符串，模式匹配的索引以及包含任何已命名捕获组的子字符串的group对象，但是对于复杂情况，此信息可能不足。

欢迎关注微信公众号：前端印象