学习ES13 的11个新特性（上）

让我们来探索ECMAScript 2022（ES13）中最新增加的功能，并看看它们的使用实例，以便更好地理解它们。

1. 类字段声明（类里面的字段）

在 ES13 之前，我们只能在构造函数中声明类字段，而不能像类似于Java或者其他编程语言那样在构造函数的外面声明类的内部字段。举个例子，外面在Java中经常写bean实体类，例如外面创建一个User实体类：

public class User {
        private int id;  //（私有）类字段
        private String name;  // （私有）类字段

        public int getId() {
                return id;
        }
        public void setId(int id) {
                this.id = id;
        }
        public String getName() {
                return name;
        }
        public void setName(String name) {
                this.name = name;
        }
}

这段代码中挖个坑，就是这个私有，之后我们会进行对比。

上面的例子中我们很容易理解类字段是个东西，我们定义了两个类字段，一个id，一个name，那么如果在 ES13 之前，我们想要在js中声明上面这两个类字段，应该怎么做呢？

class User {
  constructor() {
    this.id = 1;
    this.name = 'ZNGG在线工具';
  }
}
const user = new User();
console.log(user.id); // 1
console.log(user.name); // ZNGG在线工具

这么做其实会感觉到有点反人类的，不过好在 ES13 取消了这个限制，现在我们可以这样写：

class User {
    id = 1;
    name = 'ZNGG在线工具';
}
const user = new User();
console.log(user.id); // 1
console.log(user.name); // ZNGG在线工具

2. 私有方法和字段

之前我们并不能在类中声明私有成员，成员通常以下划线 _ 为前缀，表示它是私有的，但仍然可以从类外部访问和修改。然而这只是一种约定，并不能真正的限制，上面的Java代码，可以在类字段前面写 private 来表明这个字段是私有的，外部并不能访问到，想要访问只能使用公共的 getName() 方法。

可是现在可以了，却不是增加 private 关键字，而是一个 # 字符，例如：

class User {
    #id = 1;
    #name = 'ZNGG在线工具';
    
    get name(){
        return this.#name;
    }
}
const user = new User();
console.log(user.name); // ZNGG在线工具
console.log(user.id); //undefined
console.log(user.#id); // Uncaught SyntaxError: Private field '#id' must be declared in an enclosing class

怎么说呢，有是有了，但是感觉并没有那么好用，可能还是感觉不好用吧。

3. await 顶层等待操作符

平时我们在用 await 的时候大部分都是异步操作，为了防止回调地狱，我们一般会使用 await关键字把异步变成同步，然而一般这个时候就需要把外面的方法名(函数名)前面加上async（同步）了，不过现在ES13之后就可以了。

4. 静态类字段和静态私有方法

我们现在可以在 ES13 中为类声明静态字段和静态私有方法。静态方法可以使用 this 关键字访问类中的其他私有/公共静态成员，实例方法可以使用 this.constructor.

class User {
  static #id = 1;
  static getId() {
    return this.#id;
  }
  constructor() {
    this.constructor.#addSelf();
  }
  static #addSelf() {
    this.#id++;
  }
}
const user1 = new User();
const user2 = new User();
console.log(User.getId()); // 3

5. 静态类

这个不是很理解，但是感觉面向对象的三大特征：封装、继承和多态有关。另外就是静态类里面的静态方法会直接执行一次。举个例子：

class User {
  static role = 'normal';
}
class Admin extends User {
  static roleArray = [];
  static {
    this.roleArray.push(super.role, 'admin');
  }
}
console.log(Admin.roleArray); //['normal', 'admin']

总结两点：1. 集成类的时候可以使用super调用父类的变量；2. 静态方法会直接执行一次。

6. 检查私有字段 in

我们可以使用这个新的 in 能来检查一个对象中是否包含某个私有字段:

class User {
    #id = 1;
    #name = 'ZNGG在线工具';
    
    get name(){
        return this.#name;
    }

    get hasName(){
        return #name in this
    }
}
const user = new User();
console.log(user.hasName); //true

感觉其实还是有点鸡肋，这能有啥用？？？

未完待续...