ES13：类私有属性和方法、顶层 await、at() 方法、Object.hasOwnProperty()、类静态块 相关知识点

系列文章目录

ES6中 对象字面量、解构赋值、var，let ，const、块及作用域、展开运算符与剩余参数相关知识点
ES6中 Map 集合类型知识点、常见使用场景、以及案例
ES6中 Set集合知识点、常见使用场景、以及案例
ES6中 迭代器与生成器，相关知识点、常见使用场景、以及案例
ES6中 Promise 相关知识点、常见使用场景、以及案例
ES6中 箭头函数、this的指向问题

ES7：includes()、指数运算符 详细教程
ES8：async/await、Object 的新静态方法、padStart/padEnd、函数参数列表末尾允许逗号 相关知识点
ES9：对象扩展与剩余参数运算符、异步迭代、Promise新增方法、模板字符串修订 相关知识点
ES10：数组扁平化、对象转换、字符串修剪、catch参数、Symbol描述文字、toString修、sort排序、标准化的globalThis 相关知识点
ES11：可选链操作符、空值合并运算符、allSettled、动态导入、matchAll、meta 相关知识点
ES12：逻辑赋值运算符、数字分隔符、replaceAll、Promise新方法、WeakRef、Setter/Getter 相关知识点
ES13：类私有属性和方法、顶层 await、at() 方法、Object.hasOwnProperty()、类静态块 相关知识点
ES14：数组的新"拷贝并修改"方法、findLast() 和 findLastIndex()、 Symbol 作为 WeakMap 的键 相关知识点
ES15：Object.groupBy() 和 Map.groupBy()、Promise.withResolvers() 相关知识点
ES16：Set 集合方法增强、Promise.try、迭代器助手、JSON 模块导入 相关知识

---

文章目录

• 系列文章目录
• 一、类私有属性和方法
• [二、顶层 await (Top-level await)](#二、顶层 await (Top-level await))
• [三、at() 方法](#三、at() 方法)
• [四、 Object.hasOwnProperty()](#四、 Object.hasOwnProperty())
• 五、类静态块 (Class Static Block)

---

ES13（也被称为 ECMAScript 2022）是一个非常实用的版本，它没有引入那种翻天覆地的语法改变，但解决了很多我们在实际开发中感到"别扭"的痛点。

以下是 ES13 引入的核心新功能及代码示例教学：

---

一、类私有属性和方法

在 ES13 之前，JavaScript 类没有真正的"私有性"，通常用下划线 _变量名 来约定俗成。现在，你可以使用 # 前缀来定义真正的私有成员，外部无法直接访问。

class BankAccount {
  #balance = 0; // 私有属性

  constructor(initialAmount) {
    this.#balance = initialAmount;
  }

  #formatCurrency(amount) { // 私有方法
    return `$${amount}`;
  }

  showBalance() {
    console.log(`当前余额: ${this.#formatCurrency(this.#balance)}`);
  }
}

const account = new BankAccount(1000);
account.showBalance(); // 输出: 当前余额: $1000
// console.log(account.#balance); // 报错：SyntaxError

二、顶层 await (Top-level await)

以前 await 必须写在 async 函数内部。现在，在 ES 模块 的顶层可以直接使用 await。这对于初始化数据库连接或动态加载依赖非常方便。

代码如下（示例）：

// 以前需要写在一个立即执行的 async 函数里
// 现在直接写：
const dynamicData = await fetch('https://api.example.com/data');
const json = await dynamicData.json();

export const data = json;

三、at() 方法

这是针对数组和字符串的一个"小而美"的更新。它允许你通过 负索引 轻松获取末尾元素。

const arr = [10, 20, 30, 40];

// 以前获取最后一位：
console.log(arr[arr.length - 1]); // 40

// 现在使用 at()：
console.log(arr.at(-1)); // 40
console.log(arr.at(-2)); // 30

四、 Object.hasOwnProperty()

它是 Object.prototype.hasOwnProperty() 的更安全、更简洁的替代方案。它不会因为对象原型被修改（或者对象是 null）而报错。

const obj = { name: 'Gemini' };

// 推荐写法：
console.log(Object.hasOwnProperty(obj, 'name')); // true
console.log(Object.hasOwnProperty(obj, 'age'));  // false

五、类静态块 (Class Static Block)

如果你需要在类加载时进行复杂的静态初始化逻辑（例如逻辑中包含 try...catch），可以使用静态块

class Config {
  static connection;
  static {
    try {
      this.connection = 'Success';
    } catch {
      this.connection = 'Fail';
    }
  }
}