CV工程师
2022-08-06 09:29:09 阅读:637
让我们来探索ECMAScript 2022(ES13)中最新增加的功能,并看看它们的使用实例,以便更好地理解它们。
在 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在线工具
之前我们并不能在类中声明私有成员,成员通常以下划线 _ 为前缀,表示它是私有的,但仍然可以从类外部访问和修改。然而这只是一种约定,并不能真正的限制,上面的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
怎么说呢,有是有了,但是感觉并没有那么好用,可能还是感觉不好用吧。
平时我们在用 await
的时候大部分都是异步操作,为了防止回调地狱,我们一般会使用 await
关键字把异步变成同步,然而一般这个时候就需要把外面的方法名(函数名)前面加上async(同步)了,不过现在ES13之后就可以了。
我们现在可以在 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
这个不是很理解,但是感觉面向对象的三大特征:封装、继承和多态有关。另外就是静态类里面的静态方法会直接执行一次。举个例子:
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. 静态方法会直接执行一次。
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
感觉其实还是有点鸡肋,这能有啥用???
未完待续...
评论
扫描二维码获取文章详情
更多精彩内容尽在:WWW.ZNGG.NET