有些特性在提案阶段现代浏览器就已经支持了,比如类的私有属性和方法。
2022 年 6 月 22 日,第 123 届 Ecma 大会批准了 ECMAScript 2022 语言规范,这意味着它现在正式成为标准。具体包括以下:
class 新成员
class MyClass {
// 实例公共属性
instancePublicField = 1
// 静态公共属性
static staticPublicField = 2
// 实例私有属性
#instancePrivateField = 3
// 静态私有属性
static #staticPrivateField = 4
// 私有实例方法
#nonStaticPrivateMethod() {}
// 私有实例属性访问器
get #nonStaticPrivateAccessor() {}
set #nonStaticPrivateAccessor(value) {}
// 私有静态方法
static #staticPrivateMethod() {}
// 私有静态属性访问器
static get #staticPrivateAccessor() {}
static set #staticPrivateAccessor(value) {}
// 静态初始化块
static {
// Static initialization block
}
}
静态属性的一个问题是,它的初始化要么写在类的外部,要么写在 constructor()方法里面。
const foo = (val) => {y: val + 2, z: val + 4}
class A {
static x = 2;
static y;
static z;
}
try {
const obj = foo(A.x)
A.y = obj.y
A.z = obj.z;
} catch {
A.y = 0;
A.z = 0;
}
以上示例,静态属性 y 和 z 的值依赖静态属性 x,它们的初始化写在类的外部。另一种方法是写到类的 constructor()方法里面。这两种方法都不是很理想,前者是将类的内部逻辑写到了外部,后者则是每次新建实例都会运行一次。
为解决这个问题,ES2022 引入了静态块(static block),允许在类的内部设置一个代码块,在类生成时运行一次,主要作用是对静态属性进行初始化。
class A {
static x = 3;
static y;
static z;
static {
// this 为 class 自身
try {
const obj = foo(this.x);
this.y = obj.y;
this.z = obj.z;
}
catch {
this.y = 0;
this.z = 0;
}
}
}
好处是将静态属性 y 和 z 的初始化逻辑写在了 class 的内部,且只运行一次。
此外,静态块还有一个作用,将私有属性与类的外部代码分享。
let getName
export class Person {
#name = 'jack'
static {
getName = person => person.#name
}
}
console.log(person(new Person())) // 'jack'
in 运算符
在类的外部直接访问私有属性(无论是否存在)都会报错,但是访问不存在的公共属性不会报错。而在类内部直接访问存在的私有属性不会报错,访问不存在的私有属性会报错。可以通过该特性来判断某个对象是否为类的实例。
class Person {
#name = 'jack'
static isPerson(obj) {
try {
obj.#name
return true
} catch {
return false
}
}
}
这种写法很麻烦,可读性太差,ES2022 改进了 in 运算符,检查私有属性
class ClassWithPrivateSlot {
#privateSlot = true
static hasPrivateSlot(obj) {
return #privateSlot in obj
}
}
const obj1 = new ClassWithPrivateSlot()
assert.equal(ClassWithPrivateSlot.hasPrivateSlot(obj1), true)
const obj2 = {}
assert.equal(ClassWithPrivateSlot.hasPrivateSlot(obj2), false)
注意,判断私有属性时,in 只能用在类的内部。
子类从父类继承的私有属性,也可以使用 in 运算符来判断。
class A {
#foo = 0
static test(obj) {
console.log(#foo in obj)
}
}
class SubA extends A {}
A.test(new SubA()) // true
模块中的顶层 await
以前 await 关键字只能用在 async 函数中。在 ES2022 中,await 可以在模块的顶层使用。
const res = await fetch('https://www.baidu.com')
const html = await res.text()
console.log(html)
.at()
可索引值的方法.at()让可以读取给定索引位置的元素(如括号运算符[])并支持负索引(与括号运算符不同):
const arr = ['a', 'b', 'c']
arr.at(0)
// 'a'
arr.at(-1)
// 'c'
以下“可索引”类型具有方法.at():
string
Array
所有类型化数组类:Uint8Array 等。
Object.hasOwn(obj, propKey)
Object.hasOwn(obj, propKey)提供了一种安全的方法来检查对象 obj 是否具有自己的(非继承的)属性和 key propKey:
const proto = {
protoProp: 'protoProp'
}
const obj = {
__proto__: proto,
objProp: 'objProp'
}
assert.equal('protoProp' in obj, true) // (A)
assert.equal(Object.hasOwn(obj, 'protoProp'), false) // (B)
assert.equal(Object.hasOwn(proto, 'protoProp'), true) // (C)
in 可以既可以检查自身属性还可以检测继承的属性,而 Object.hasOwn()仅检测自己的属性。
正则表达式匹配索引
给正则表达式添加修饰符 d
,会生成匹配对象,记录每个组捕获的开始和结束索引:
const matchObj = /(a+)(b+)/d.exec('aaaabb')
assert.equal(matchObj[1], 'aaaa')
assert.deepEqual(matchObj.indices[1], [0, 4])
assert.equal(matchObj[2], 'bb')
assert.deepEqual(matchObj.indices[2], [4, 6])
Error 对象的 cause 属性
Error 对象用来表示代码运行时的异常情况,但是从这个对象拿到的上下文信息,有时很难解读,也不够充分。ES2022 为 Error 对象添加了一个 cause
属性,可以在生成错误时,添加报错原因的描述。
它的用法是 new Error()生成 Error 实例时,给出一个描述对象,该对象可以设置 cause 属性。
const actual = new Error('an error!', { cause: 'Error cause' })
actual.cause // 'Error cause'
上面示例中,生成 Error 实例时,使用描述对象给出 cause 属性,写入报错的原因。然后,就可以从实例对象上读取这个属性。
casue 属性可以放置任意内容,不必一定是字符串。
try {
foo()
} catch (err) {
throw new Error('foo failed!', { cause: err })
}