ECMAScript 2024 会有哪些新特性？

export { users };

// usingAwait.js

import {users} from ‘./a.js’;

console.log('users: ', users);

console.log(‘usingAwait module’);

我们还可以立即调用顶层async函数（IIAFE）：

import fetch  from “node-fetch”;

(async () => {

const resp = await fetch(‘https://jsonplaceholder.typicode.com/users’);

users = resp.json();

})();

export { users };

这样会有一个缺点，直接导入的 users 是 undefined，需要在异步执行完成之后才能访问它：

// usingAwait.js

import {users} from ‘./a.js’;

console.log(‘users:’, users); // undefined

setTimeout(() => {

console.log(‘users:’, users);

}, 100);

console.log(‘usingAwait module’);

当然，这种方法并不安全，因为如果异步函数执行花费的时间超过100毫秒， 它就不会起作用了，users 仍然是 undefined。

另一个方法是导出一个 promise，让导入模块知道数据已经准备好了：

//a.js

import fetch  from “node-fetch”;

export default (async () => {

const resp = await fetch(‘https://jsonplaceholder.typicode.com/users’);

users = resp.json();

})();

export { users };

//usingAwait.js

import promise, {users} from ‘./a.js’;

promise.then(() => {

console.log(‘usingAwait module’);

setTimeout(() => console.log(‘users:’, users), 100);

});

虽然这种方法似乎是给出了预期的结果，但是有一定的局限性：导入模块必须了解这种模式才能正确使用它。

而顶层await就可以消除这些缺点：

// a.js

const resp = await fetch(‘https://jsonplaceholder.typicode.com/users’);

const users = resp.json();

export { users};

// usingAwait.js

import {users} from ‘./a.mjs’;

console.log(users);

console.log(‘usingAwait module’);

顶级 await 在以下场景中将非常有用：

• 动态加载模块

const strings = await import(/i18n/${navigator.language});

• 资源初始化

const connection = await dbConnector();

• 依赖回退

let translations;

try {

translations = await import(‘https://app.fr.json’);

} catch {

translations = await import(‘https://fallback.en.json’);

}

目前，在这些地方已经支持 Top-level await：

• V8 v8.9

• Webpack 5.0.0

• Babel

• Chrome DevTools REPL

• Node REPL

二、类的实例成员

---

1. 公共实例字段

公共类字段允许我们使用赋值运算符 (=) 将实例属性添加到类定义中。下面来一个计数器的例子：

import React, { Component } from “react”;

export class Incrementor extends Component {

constructor() {

super();

this.state = {

count: 0,

};

this.increment = this.increment.bind(this);

}

increment() {

this.setState({ count: this.state.count + 1 });

}

render() {

return (

Increment: {this.state.count}

);

}

}

在这个例子中，在构造函数中定义了实例字段和绑定方法，通过新的类语法，我们可以使代码更加直观。新的公共类字段语法允许我们直接将实例属性作为属性添加到类上，而无需使用构造函数方法。这样就简化了类的定义，使代码更加简洁、可读：

import React from “react”;

export class Incrementor extends React.Component {

state = { count: 0 };

increment = () => this.setState({ count: this.state.count + 1 });

render = () => (

Increment: {this.state.count}

);

}

有些小伙伴可能就疑问了，这个功能很早就可以使用了呀。但是它现在还不是标准的 ECMAScript，默认是不开启的，如果使用 create-react-app 创建 React 项目，那么它默认是启用的，否则我们必须使用正确的babel插件才能正常使用（@babel/preset-env）。

下面来看看关于公共实例字段的注意事项：

• 公共实例字段存在于每个创建的类实例上。它们要么是在