有些特性在提案階段現(xiàn)代瀏覽器就已經(jīng)支持了，比如類的私有屬性和方法。

2022 年 6 月 22 日，第 123 屆 Ecma 大會(huì)批準(zhǔn)了 ECMAScript 2022 語言規(guī)范，這意味著它現(xiàn)在正式成為標(biāo)準(zhǔn)。具體包括以下：

class 新成員

class MyClass {
  // 實(shí)例公共屬性
  instancePublicField = 1
  // 靜態(tài)公共屬性
  static staticPublicField = 2

  // 實(shí)例私有屬性
  #instancePrivateField = 3
  // 靜態(tài)私有屬性
  static #staticPrivateField = 4

  // 私有實(shí)例方法
  #nonStaticPrivateMethod() {}
  // 私有實(shí)例屬性訪問器
  get #nonStaticPrivateAccessor() {}
  set #nonStaticPrivateAccessor(value) {}

  // 私有靜態(tài)方法
  static #staticPrivateMethod() {}

  // 私有靜態(tài)屬性訪問器
  static get #staticPrivateAccessor() {}
  static set #staticPrivateAccessor(value) {}

  // 靜態(tài)初始化塊
  static {
    // Static initialization block
  }
}

靜態(tài)屬性的一個(gè)問題是，它的初始化要么寫在類的外部，要么寫在 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;
}

以上示例，靜態(tài)屬性 y 和 z 的值依賴靜態(tài)屬性 x，它們的初始化寫在類的外部。另一種方法是寫到類的 constructor()方法里面。這兩種方法都不是很理想，前者是將類的內(nèi)部邏輯寫到了外部，后者則是每次新建實(shí)例都會(huì)運(yùn)行一次。

為解決這個(gè)問題，ES2022 引入了靜態(tài)塊（static block），允許在類的內(nèi)部設(shè)置一個(gè)代碼塊，在類生成時(shí)運(yùn)行一次，主要作用是對(duì)靜態(tài)屬性進(jìn)行初始化。

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

好處是將靜態(tài)屬性 y 和 z 的初始化邏輯寫在了 class 的內(nèi)部，且只運(yùn)行一次。

此外，靜態(tài)塊還有一個(gè)作用，將私有屬性與類的外部代碼分享。

let getName

export class Person {
  #name = 'jack'
  static {
    getName = person => person.#name
  }
}

console.log(person(new Person())) // 'jack'

in 運(yùn)算符

在類的外部直接訪問私有屬性（無論是否存在）都會(huì)報(bào)錯(cuò)，但是訪問不存在的公共屬性不會(huì)報(bào)錯(cuò)。而在類內(nèi)部直接訪問存在的私有屬性不會(huì)報(bào)錯(cuò)，訪問不存在的私有屬性會(huì)報(bào)錯(cuò)?？梢酝ㄟ^該特性來判斷某個(gè)對(duì)象是否為類的實(shí)例。

class Person {
  #name = 'jack'
  static isPerson(obj) {
    try {
      obj.#name
      return true
    } catch {
      return false
    }
  }
}

這種寫法很麻煩，可讀性太差，ES2022 改進(jìn)了 in 運(yùn)算符，檢查私有屬性

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)

注意，判斷私有屬性時(shí)，in 只能用在類的內(nèi)部。

子類從父類繼承的私有屬性，也可以使用 in 運(yùn)算符來判斷。

class A {
  #foo = 0
  static test(obj) {
    console.log(#foo in obj)
  }
}

class SubA extends A {}

A.test(new SubA()) // true

模塊中的頂層 await

以前 await 關(guān)鍵字只能用在 async 函數(shù)中。在 ES2022 中，await 可以在模塊的頂層使用。

const res = await fetch('https://www.baidu.com')
const html = await res.text()
console.log(html)

.at()

可索引值的方法.at()讓可以讀取給定索引位置的元素（如括號(hào)運(yùn)算符[]）并支持負(fù)索引（與括號(hào)運(yùn)算符不同）：

const arr = ['a', 'b', 'c']

arr.at(0)
// 'a'

arr.at(-1)
// 'c'

以下“可索引”類型具有方法.at()：

string
Array
所有類型化數(shù)組類：Uint8Array 等。

Object.hasOwn(obj, propKey)

Object.hasOwn(obj, propKey)提供了一種安全的方法來檢查對(duì)象 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á)式匹配索引

給正則表達(dá)式添加修飾符 d，會(huì)生成匹配對(duì)象，記錄每個(gè)組捕獲的開始和結(jié)束索引：

18048978-a216-4745-b7ea-350a53430029.png

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 對(duì)象的 cause 屬性

Error 對(duì)象用來表示代碼運(yùn)行時(shí)的異常情況，但是從這個(gè)對(duì)象拿到的上下文信息，有時(shí)很難解讀，也不夠充分。ES2022 為 Error 對(duì)象添加了一個(gè) cause 屬性，可以在生成錯(cuò)誤時(shí)，添加報(bào)錯(cuò)原因的描述。

它的用法是 new Error()生成 Error 實(shí)例時(shí)，給出一個(gè)描述對(duì)象，該對(duì)象可以設(shè)置 cause 屬性。

const actual = new Error('an error!', { cause: 'Error cause' })

actual.cause // 'Error cause'

上面示例中，生成 Error 實(shí)例時(shí)，使用描述對(duì)象給出 cause 屬性，寫入報(bào)錯(cuò)的原因。然后，就可以從實(shí)例對(duì)象上讀取這個(gè)屬性。

casue 屬性可以放置任意內(nèi)容，不必一定是字符串。

try {
  foo()
} catch (err) {
  throw new Error('foo failed!', { cause: err })
}