JavaScript 中的显式资源管理（Explicit Resource Management）：利用 `using` 关键字实现 RAII 模式 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位编程爱好者、专家们，大家好。

今天，我们将深入探讨 JavaScript 中一项令人兴奋的新特性：显式资源管理（Explicit Resource Management），以及如何利用全新的 using 关键字，将其他语言中行之有效的 RAII（Resource Acquisition Is Initialization）模式引入我们的 JavaScript 应用中。作为一门以垃圾回收（Garbage Collection, GC）为主要内存管理机制的语言，JavaScript 长期以来在处理非内存资源时面临着一些挑战。而 using 关键字的引入，正是为了优雅地解决这些问题，让我们的代码更加健壮、可读，并最终提升开发效率。

引言：JavaScript 资源管理的演变与挑战

在 JavaScript 的世界里，内存管理通常被认为是“自动的”。我们创建对象、变量，而 V8 引擎背后的垃圾回收器会聪明地追踪哪些内存不再被引用，并在适当的时机回收它们。这种隐式的内存管理机制极大地简化了开发，使我们能够专注于业务逻辑，而非底层的内存操作。

然而，程序运行时所使用的资源远不止内存。文件句柄、网络连接、数据库连接、锁、定时器、DOM 事件监听器、WebAssembly 实例的外部内存、WebGL 上下文资源等等，这些都是需要被“获取”和“释放”的资源。它们与内存不同，通常不会被垃圾回收器自动管理。如果未能及时、正确地释放这些资源，轻则导致性能下降、资源泄漏，重则引发系统崩溃或安全漏洞。

传统上，JavaScript 开发者管理这类非内存资源主要依赖于 try...finally 结构。

// 模拟一个文件操作
class SimulatedFileHandle {
    constructor(path) {
        this.path = path;
        this.isOpen = false;
    }

    async open() {
        console.log(`[File] Opening file: ${this.path}...`);
        // 模拟异步打开操作
        await new Promise(resolve => setTimeout(resolve, 100));
        this.isOpen = true;
        console.log(`[File] File ${this.path} opened.`);
        return this;
    }

    async write(data) {
        if (!this.isOpen) {
            throw new Error(`File ${this.path} is not open.`);
        }
        console.log(`[File] Writing "${data}" to ${this.path}...`);
        await new Promise(resolve => setTimeout(resolve, 50));
        console.log(`[File] Data written to ${this.path}.`);
    }

    async close() {
        if (this.isOpen) {
            console.log(`[File] Closing file: ${this.path}...`);
            // 模拟异步关闭操作
            await new Promise(resolve => setTimeout(resolve, 80));
            this.isOpen = false;
            console.log(`[File] File ${this.path} closed.`);
        } else {
            console.log(`[File] File ${this.path} was already closed or never opened.`);
        }
    }
}

async function processFileTraditional(filePath, data) {
    let fileHandle;
    try {
        fileHandle = await new SimulatedFileHandle(filePath).open();
        await fileHandle.write(data);
        console.log(`[Main] File processing completed for ${filePath}.`);
    } catch (error) {
        console.error(`[Main] Error processing file ${filePath}:`, error.message);
    } finally {
        if (fileHandle && fileHandle.isOpen) {
            await fileHandle.close();
        }
    }
}

// 运行示例
// processFileTraditional("mydata.txt", "Hello, World!");
// processFileTraditional("error.txt", "This will fail due to some reason.").then(() => { /* ... */ });

try...finally 模式虽然有效，但存在显而易见的缺点：

冗余和重复： 每次使用资源都需要手动编写 try...finally 块，尤其是在多个资源嵌套使用时，代码会迅速变得臃肿且难以阅读。
易错性： 开发者可能会忘记在 finally 块中释放资源，或者在复杂的逻辑分支中遗漏某些清理操作。
异步处理的复杂性： 当资源获取和释放都是异步操作时，finally 块中也需要使用 await，这进一步增加了代码的复杂性。
资源泄漏风险： 如果在 try 块中资源初始化失败，或者 finally 块中的清理逻辑本身出现问题，都可能导致资源未能正确释放。

为了解决这些痛点，JavaScript 社区引入了显式资源管理提案，其核心就是 using 关键字，旨在将其他语言（如 C# 的 using 语句、Python 的 with 语句、Java 的 try-with-resources 语句）中的 RAII 模式带入 JavaScript。

第一章：RAII 模式的核心理念

在深入 using 关键字之前，我们必须理解其背后的设计哲学——RAII（Resource Acquisition Is Initialization），即“资源获取即初始化”。

RAII 是 C++ 中一种强大的编程范式，其核心思想是将资源的生命周期与对象的生命周期绑定在一起。具体来说：

资源获取： 当一个对象被创建（初始化）时，它就负责获取所需的资源。
资源释放： 当该对象超出其作用域（生命周期结束）时，其析构函数（在 C++ 中）会自动被调用，负责释放它所持有的资源。

这种模式的优点在于，它将资源的获取和释放逻辑封装在一个单一的单元（对象）中，并通过语言的机制（作用域规则）确保资源在不再需要时一定会被释放，无论代码如何执行，包括正常退出、异常抛出等情况。这极大地简化了错误处理和资源清理的复杂性，有效避免了资源泄漏。

在 JavaScript 中，由于没有传统意义上的析构函数和直接的内存管理，RAII 模式需要通过一种协议来实现。using 关键字正是这种协议的语法糖。

第二章：`using` 关键字的语法与协议

using 关键字允许我们声明一个或多个资源，这些资源将在包含它们的块结束时自动清理。它支持同步和异步两种资源清理模式。

2.1 `using` 声明：同步资源管理

using 声明的基本语法如下：

function someFunction() {
    using resource = someDisposableObject;
    // ... 在这里使用 resource ...
} // resource 在这里自动被清理

当执行流离开 using 声明所在的块时（无论是正常结束、return、break、continue 还是抛出异常），resource 对象上会调用一个特定的方法来执行清理操作。这个方法就是由 Symbol.dispose 这个特殊的 Symbol 定义的。

Symbol.dispose 协议：

一个对象如果想要被 using 关键字管理，它必须实现 Symbol.dispose 方法。这个方法不接受任何参数，也不应该返回任何值。它应该包含释放资源所需的所有同步清理逻辑。

class MySynchronousResource {
    constructor(name) {
        this.name = name;
        this.isDisposed = false;
        console.log(`[${this.name}] Resource acquired.`);
    }

    doSomething() {
        if (this.isDisposed) {
            throw new Error(`[${this.name}] Resource is already disposed.`);
        }
        console.log(`[${this.name}] Doing something important.`);
    }

    [Symbol.dispose]() {
        if (!this.isDisposed) {
            console.log(`[${this.name}] Cleaning up resource...`);
            // 这里放置同步清理逻辑
            this.isDisposed = true;
            console.log(`[${this.name}] Resource disposed.`);
        } else {
            console.log(`[${this.name}] Resource was already disposed.`);
        }
    }
}

function useMyResource() {
    console.log("Entering useMyResource function.");
    using resource1 = new MySynchronousResource("Resource A");
    resource1.doSomething();

    if (Math.random() > 0.5) {
        console.log("Exiting early from useMyResource.");
        return; // resource1 仍会被清理
    }

    using resource2 = new MySynchronousResource("Resource B");
    resource2.doSomething();

    console.log("Exiting useMyResource function normally.");
}

// useMyResource();
// console.log("n--- After first call ---n");
// useMyResource(); // 再次调用以展示不同路径

在上面的例子中，无论 useMyResource 函数是正常结束还是提前 return，resource1 和 resource2（如果创建了）的 [Symbol.dispose] 方法都会被自动调用，确保资源得到清理。

2.2 `await using` 声明：异步资源管理

在现代 JavaScript 应用中，许多资源操作都是异步的（例如文件 I/O、网络请求）。using 关键字同样支持异步资源的管理，通过 await using 语法实现。

async function someAsyncFunction() {
    await using resource = someAsyncDisposableObject;
    // ... 在这里使用 resource ...
} // resource 在这里异步自动被清理

当执行流离开 await using 声明所在的块时，resource 对象上会调用一个特定的异步方法来执行清理操作。这个方法就是由 Symbol.asyncDispose 这个特殊的 Symbol 定义的。

Symbol.asyncDispose 协议：

一个对象如果需要异步清理，它必须实现 Symbol.asyncDispose 方法。这个方法不接受任何参数，但必须返回一个 Promise。这个 Promise 应该在所有异步清理操作完成后解决。

class MyAsynchronousResource {
    constructor(id) {
        this.id = id;
        this.isDisposed = false;
        console.log(`[Async Resource ${this.id}] Resource acquired.`);
    }

    async doAsyncSomething() {
        if (this.isDisposed) {
            throw new Error(`[Async Resource ${this.id}] Resource is already disposed.`);
        }
        console.log(`[Async Resource ${this.id}] Doing something asynchronous...`);
        await new Promise(resolve => setTimeout(resolve, 150));
        console.log(`[Async Resource ${this.id}] Asynchronous task done.`);
    }

    async [Symbol.asyncDispose]() {
        if (!this.isDisposed) {
            console.log(`[Async Resource ${this.id}] Initiating asynchronous cleanup...`);
            // 这里放置异步清理逻辑，例如关闭网络连接、保存数据等
            await new Promise(resolve => setTimeout(resolve, 100));
            this.isDisposed = true;
            console.log(`[Async Resource ${this.id}] Asynchronous resource disposed.`);
        } else {
            console.log(`[Async Resource ${this.id}] Async resource was already disposed.`);
        }
    }
}

async function useMyAsyncResource() {
    console.log("Entering useMyAsyncResource function.");
    await using resource = new MyAsynchronousResource("A");
    await resource.doAsyncSomething();

    if (Math.random() < 0.3) {
        console.log("Throwing error from useMyAsyncResource.");
        throw new Error("Simulated async error!"); // resource 仍会被异步清理
    }

    console.log("Exiting useMyAsyncResource function normally.");
}

// (async () => {
//     await useMyAsyncResource();
//     console.log("n--- After first async call ---n");
//     await useMyAsyncResource(); // 再次调用以展示不同路径
// })();

在异步函数中，await using 确保在函数退出时，无论是正常返回还是抛出异常，[Symbol.asyncDispose] 方法都会被 await 调用，等待其清理完成。

2.3 `using` 声明的生命周期

using 声明的资源在以下情况下会被清理：

块正常结束： 当执行流到达 using 声明所在块的末尾。
提前退出： 当块内发生 return、break、continue 语句。
异常抛出： 当块内抛出未捕获的异常。

无论何种情况，清理操作都会在资源声明的相反顺序进行。也就是说，如果资源 A 在资源 B 之前声明，那么资源 B 会在资源 A 之前被清理。这对于处理依赖关系复杂的嵌套资源至关重要（例如，先关闭数据库连接，再关闭连接池）。

function nestedResources() {
    console.log("--- Entering nestedResources ---");
    using res1 = new MySynchronousResource("Outer Resource");
    console.log("Outer resource acquired.");

    try {
        using res2 = new MySynchronousResource("Inner Resource");
        console.log("Inner resource acquired.");
        if (Math.random() > 0.5) {
            throw new Error("Simulated error in inner block");
        }
        console.log("Inner block finished normally.");
    } catch (e) {
        console.error("Caught error:", e.message);
    } finally {
        console.log("Inner try-catch-finally block finished.");
    }

    console.log("--- Exiting nestedResources ---");
}

// nestedResources();

运行此代码，你会发现 Inner Resource 总是先于 Outer Resource 被清理，即使在 try 块中发生了异常。

第三章：`using` 关键字的实际应用场景

using 关键字的引入，将极大地改善 JavaScript 中对各种非内存资源的管理。下面我们通过几个具体的例子来展示其威力。

3.1 模拟文件句柄管理

回顾我们开头的 SimulatedFileHandle 示例。现在，我们可以用 await using 来重构它，使其更加简洁和健壮。

// 重新定义 SimulatedFileHandle，使其符合 AsyncDisposable 协议
class SimulatedFileHandle {
    constructor(path) {
        this.path = path;
        this.isOpen = false;
        console.log(`[File] Initializing file handle for: ${this.path}`);
    }

    async open() {
        if (this.isOpen) {
            console.log(`[File] File ${this.path} is already open.`);
            return this;
        }
        console.log(`[File] Opening file: ${this.path}...`);
        await new Promise(resolve => setTimeout(resolve, 100));
        this.isOpen = true;
        console.log(`[File] File ${this.path} opened.`);
        return this;
    }

    async write(data) {
        if (!this.isOpen) {
            throw new Error(`File ${this.path} is not open.`);
        }
        console.log(`[File] Writing "${data}" to ${this.path}...`);
        await new Promise(resolve => setTimeout(resolve, 50));
        console.log(`[File] Data written to ${this.path}.`);
    }

    async read() {
        if (!this.isOpen) {
            throw new Error(`File ${this.path} is not open.`);
        }
        console.log(`[File] Reading from ${this.path}...`);
        await new Promise(resolve => setTimeout(resolve, 70));
        const content = `Content from ${this.path}`;
        console.log(`[File] Read "${content}" from ${this.path}.`);
        return content;
    }

    async [Symbol.asyncDispose]() {
        if (this.isOpen) {
            console.log(`[File] Initiating asynchronous close for ${this.path}...`);
            await new Promise(resolve => setTimeout(resolve, 80));
            this.isOpen = false;
            console.log(`[File] File ${this.path} closed.`);
        } else {
            console.log(`[File] File ${this.path} was already closed or never opened, no-op dispose.`);
        }
    }
}

async function processFileWithUsing(filePath, data) {
    console.log(`[Main] Starting processing for ${filePath}...`);
    try {
        // 关键点：使用 await using
        await using fileHandle = await new SimulatedFileHandle(filePath).open();

        await fileHandle.write(data);
        const content = await fileHandle.read();
        console.log(`[Main] Processed content: ${content}`);

        if (filePath.includes("error")) {
            throw new Error("Simulated error during file processing!");
        }
        console.log(`[Main] File processing completed for ${filePath}.`);
    } catch (error) {
        console.error(`[Main] Error processing file ${filePath}:`, error.message);
    }
    console.log(`[Main] Finished processing for ${filePath}.`);
}

// (async () => {
//     console.log("n--- Processing mydata.txt ---");
//     await processFileWithUsing("mydata.txt", "Hello, using!");

//     console.log("n--- Processing error.txt (with error) ---");
//     await processFileWithUsing("error.txt", "This will trigger an error.");

//     console.log("n--- Nested file operations ---");
//     await (async () => {
//         await using outerFile = await new SimulatedFileHandle("outer.txt").open();
//         await outerFile.write("Outer data");
//         { // 引入一个新的块作用域
//             await using innerFile = await new SimulatedFileHandle("inner.txt").open();
//             await innerFile.write("Inner data");
//             // innerFile 在此块结束时被清理
//         }
//         await outerFile.read();
//         // outerFile 在整个 async IIFE 结束时被清理
//     })();
// })();

这段代码比传统的 try...finally 方式清晰得多。无论 try 块中发生什么（成功、失败、提前返回），fileHandle 都会被安全地关闭。

3.2 模拟数据库连接管理

数据库连接是一种典型的需要显式管理的资源。连接池通常管理着这些连接，但从池中获取连接并确保其返回池中是开发者的责任。

class DatabaseConnection {
    constructor(id) {
        this.id = id;
        this.isOpen = false;
        console.log(`[DB Conn ${this.id}] Initialized.`);
    }

    async connect() {
        if (this.isOpen) {
            console.log(`[DB Conn ${this.id}] Already connected.`);
            return this;
        }
        console.log(`[DB Conn ${this.id}] Connecting...`);
        await new Promise(resolve => setTimeout(resolve, 120));
        this.isOpen = true;
        console.log(`[DB Conn ${this.id}] Connected.`);
        return this;
    }

    async query(sql) {
        if (!this.isOpen) {
            throw new Error(`[DB Conn ${this.id}] Not connected.`);
        }
        console.log(`[DB Conn ${this.id}] Executing query: "${sql}"`);
        await new Promise(resolve => setTimeout(resolve, 80));
        console.log(`[DB Conn ${this.id}] Query executed.`);
        return `Result for ${sql}`;
    }

    async [Symbol.asyncDispose]() {
        if (this.isOpen) {
            console.log(`[DB Conn ${this.id}] Disconnecting...`);
            await new Promise(resolve => setTimeout(resolve, 100));
            this.isOpen = false;
            console.log(`[DB Conn ${this.id}] Disconnected.`);
        } else {
            console.log(`[DB Conn ${this.id}] Already disconnected or never connected, no-op dispose.`);
        }
    }
}

class ConnectionPool {
    constructor(size) {
        this.pool = [];
        this.maxSize = size;
        this.available = [];
        this.nextId = 1;
        console.log(`[Pool] Connection pool created with size ${size}.`);
    }

    async getConnection() {
        if (this.available.length > 0) {
            const conn = this.available.shift();
            console.log(`[Pool] Reusing connection ${conn.id}.`);
            return conn;
        }
        if (this.pool.length < this.maxSize) {
            const newConn = await new DatabaseConnection(this.nextId++).connect();
            this.pool.push(newConn);
            console.log(`[Pool] Created new connection ${newConn.id}.`);
            return newConn;
        }
        console.log("[Pool] Waiting for an available connection...");
        // 模拟等待机制
        await new Promise(resolve => setTimeout(resolve, 200));
        return this.getConnection(); // 递归重试
    }

    releaseConnection(conn) {
        if (conn && conn instanceof DatabaseConnection) {
            this.available.push(conn);
            console.log(`[Pool] Released connection ${conn.id} back to pool.`);
        }
    }

    // ConnectionPool 自身也可以是可释放的，用于关闭所有连接
    async [Symbol.asyncDispose]() {
        console.log(`[Pool] Disposing connection pool. Closing all ${this.pool.length} connections.`);
        for (const conn of this.pool) {
            await conn[Symbol.asyncDispose](); // 调用每个连接的 dispose
        }
        this.pool = [];
        this.available = [];
        console.log("[Pool] Connection pool disposed.");
    }
}

async function performDbOperation(pool, query) {
    let conn; // 传统方式需要提前声明
    try {
        // 使用 await using 自动管理从连接池获取的连接
        await using dbConn = await pool.getConnection();
        const result = await dbConn.query(query);
        console.log(`[Main] Query result: ${result}`);
        if (query.includes("error")) {
            throw new Error("Simulated DB query error!");
        }
    } catch (error) {
        console.error(`[Main] DB operation failed:`, error.message);
    }
    // 注意：dbConn 会在 await using 块结束时自动调用 Symbol.asyncDispose。
    // 但是，我们通常不希望直接关闭连接，而是将其返回连接池。
    // 这意味着我们的 DatabaseConnection 的 Symbol.asyncDispose 应该被设计成“返回到池中”而不是“关闭”。
    // 让我们修改 DatabaseConnection 的 dispose 逻辑以适应连接池。
}

// 修正后的 DatabaseConnection 用于连接池
class PooledDatabaseConnection {
    constructor(id, pool) {
        this.id = id;
        this.pool = pool; // 引用父级连接池
        this.isOpen = false;
        console.log(`[Pooled DB Conn ${this.id}] Initialized.`);
    }

    async connect() {
        if (this.isOpen) {
            console.log(`[Pooled DB Conn ${this.id}] Already connected.`);
            return this;
        }
        console.log(`[Pooled DB Conn ${this.id}] Establishing real connection...`);
        await new Promise(resolve => setTimeout(resolve, 120));
        this.isOpen = true;
        console.log(`[Pooled DB Conn ${this.id}] Real connection established.`);
        return this;
    }

    async query(sql) {
        if (!this.isOpen) {
            throw new Error(`[Pooled DB Conn ${this.id}] Not connected.`);
        }
        console.log(`[Pooled DB Conn ${this.id}] Executing query: "${sql}"`);
        await new Promise(resolve => setTimeout(resolve, 80));
        console.log(`[Pooled DB Conn ${this.id}] Query executed.`);
        return `Result for ${sql}`;
    }

    // 关键改变：dispose 方法将连接返回给连接池
    async [Symbol.asyncDispose]() {
        if (this.isOpen) {
            console.log(`[Pooled DB Conn ${this.id}] Returning to pool.`);
            this.pool.releaseConnection(this); // 将自身返回给池
            // 这里不真正关闭连接，而是让连接池管理其生命周期
        } else {
            console.log(`[Pooled DB Conn ${this.id}] Not connected, no-op dispose.`);
        }
    }

    // 真正的关闭方法，由连接池在销毁时调用
    async reallyClose() {
        if (this.isOpen) {
            console.log(`[Pooled DB Conn ${this.id}] Really closing connection...`);
            await new Promise(resolve => setTimeout(resolve, 50));
            this.isOpen = false;
            console.log(`[Pooled DB Conn ${this.id}] Connection truly closed.`);
        }
    }
}

class RealConnectionPool {
    constructor(size) {
        this.pool = []; // 存储所有已创建的连接（无论是否在用）
        this.available = []; // 存储可用连接
        this.maxSize = size;
        this.nextId = 1;
        console.log(`[Real Pool] Connection pool created with size ${size}.`);
    }

    async getConnection() {
        if (this.available.length > 0) {
            const conn = this.available.shift();
            console.log(`[Real Pool] Reusing connection ${conn.id}.`);
            return conn;
        }
        if (this.pool.length < this.maxSize) {
            const newConn = new PooledDatabaseConnection(this.nextId++, this); // 传入 pool 实例
            await newConn.connect();
            this.pool.push(newConn);
            console.log(`[Real Pool] Created new connection ${newConn.id}.`);
            return newConn;
        }
        console.log("[Real Pool] Waiting for an available connection...");
        await new Promise(resolve => setTimeout(resolve, 200));
        return this.getConnection();
    }

    releaseConnection(conn) {
        if (conn && conn instanceof PooledDatabaseConnection) {
            if (!this.available.includes(conn)) { // 避免重复释放
                 this.available.push(conn);
                 console.log(`[Real Pool] Released connection ${conn.id} back to pool.`);
            } else {
                 console.warn(`[Real Pool] Connection ${conn.id} already in pool.`);
            }
        }
    }

    async [Symbol.asyncDispose]() {
        console.log(`[Real Pool] Disposing connection pool. Closing all ${this.pool.length} connections.`);
        for (const conn of this.pool) {
            await conn.reallyClose(); // 调用连接的真正关闭方法
        }
        this.pool = [];
        this.available = [];
        console.log("[Real Pool] Connection pool disposed.");
    }
}

async function performPooledDbOperation(pool, query) {
    console.log(`[Main] Starting DB operation for query: "${query}"`);
    try {
        await using dbConn = await pool.getConnection(); // 从池中获取连接
        const result = await dbConn.query(query);
        console.log(`[Main] Query result: ${result}`);
        if (query.includes("error")) {
            throw new Error("Simulated DB query error!");
        }
    } catch (error) {
        console.error(`[Main] DB operation failed:`, error.message);
    }
    console.log(`[Main] Finished DB operation for query: "${query}"`);
}

// (async () => {
//     await using pool = new RealConnectionPool(2); // 创建一个可释放的连接池
//     console.log("n--- First operation ---");
//     await performPooledDbOperation(pool, "SELECT * FROM users;");
//     console.log("n--- Second operation (reusing conn) ---");
//     await performPooledDbOperation(pool, "INSERT INTO logs VALUES ('log 1');");
//     console.log("n--- Third operation (new conn) ---");
//     await performPooledDbOperation(pool, "SELECT data FROM products;");
//     console.log("n--- Fourth operation (error, conn returned) ---");
//     await performPooledDbOperation(pool, "DELETE FROM bad_table; -- error query");
//     // pool 在 async IIFE 结束时被清理，所有连接被关闭
// })();

这个例子展示了如何利用 await using 管理从连接池中获取的连接，并在操作完成后自动将其返回给连接池。同时，连接池本身也可以实现 Symbol.asyncDispose，以便在整个应用关闭时优雅地关闭所有底层的数据库连接。

3.3 UI 锁或状态管理

在前端应用中，有时我们需要在执行某个操作期间“锁定”UI，防止用户重复点击，或者确保某个状态是临时的。

class UILock {
    constructor(element) {
        this.element = element;
        this.isLocked = false;
    }

    acquire() {
        if (this.isLocked) {
            throw new Error("UI is already locked.");
        }
        this.isLocked = true;
        this.element.setAttribute('disabled', 'true');
        this.element.style.cursor = 'wait';
        console.log(`[UI Lock] UI element locked: ${this.element.id}`);
        return this; // 返回自身以便链式调用或直接使用
    }

    [Symbol.dispose]() {
        if (this.isLocked) {
            this.element.removeAttribute('disabled');
            this.element.style.cursor = 'default';
            this.isLocked = false;
            console.log(`[UI Lock] UI element unlocked: ${this.element.id}`);
        } else {
            console.log(`[UI Lock] UI was not locked, no-op dispose.`);
        }
    }
}

// 模拟一个 DOM 元素
const simulatedButton = {
    id: "submitButton",
    _disabled: false,
    _cursor: 'default',
    setAttribute: function(attr, value) {
        if (attr === 'disabled') this._disabled = (value === 'true');
        console.log(`[DOM] Set ${attr}=${value} for ${this.id}`);
    },
    removeAttribute: function(attr) {
        if (attr === 'disabled') this._disabled = false;
        console.log(`[DOM] Removed ${attr} for ${this.id}`);
    },
    style: {
        set cursor(value) {
            this._cursor = value;
            console.log(`[DOM] Set cursor=${value} for ${simulatedButton.id}`);
        },
        get cursor() { return this._cursor; }
    }
};

async function handleSubmitClick() {
    console.log(`[Main] Clicked ${simulatedButton.id}.`);
    try {
        // 自动锁定 UI，并在操作结束后自动解锁
        using lock = new UILock(simulatedButton).acquire();

        console.log("[Main] Performing long running task...");
        await new Promise(resolve => setTimeout(resolve, 1500)); // 模拟异步操作

        if (Math.random() > 0.7) {
            throw new Error("Simulated submission error!");
        }
        console.log("[Main] Task completed successfully.");
    } catch (error) {
        console.error("[Main] Submission failed:", error.message);
    } finally {
        console.log("[Main] Handle submit click function finished.");
    }
}

// (async () => {
//     console.log("--- First submission attempt ---");
//     await handleSubmitClick();
//     await new Promise(resolve => setTimeout(resolve, 500)); // 等待一下
//     console.log("n--- Second submission attempt ---");
//     await handleSubmitClick();
// })();

在这个例子中，UILock 对象在被 using 声明时获取锁（禁用按钮），并在 handleSubmitClick 函数结束时（无论成功或失败）自动释放锁（启用按钮）。这比手动在 try...finally 中处理 setAttribute 和 removeAttribute 要简洁和安全得多。

3.4 清理定时器和事件监听器

虽然定时器和事件监听器通常由 GC 间接管理（当它们引用的对象不再可达时），但显式清理可以避免意外行为或在特定场景下提高效率。

class ManagedTimer {
    constructor(callback, delay, type = 'timeout') {
        this.callback = callback;
        this.delay = delay;
        this.type = type;
        this.handle = null;
        this.isCleared = false;
        console.log(`[Timer] Created a ${type} timer.`);
    }

    start() {
        if (this.handle) {
            console.warn(`[Timer] Timer already started.`);
            return this;
        }
        if (this.type === 'timeout') {
            this.handle = setTimeout(() => {
                if (!this.isCleared) {
                    this.callback();
                    this.isCleared = true; // setTimeout 只执行一次
                }
            }, this.delay);
        } else if (this.type === 'interval') {
            this.handle = setInterval(() => {
                if (!this.isCleared) {
                    this.callback();
                }
            }, this.delay);
        }
        console.log(`[Timer] Timer started (handle: ${this.handle}).`);
        return this;
    }

    [Symbol.dispose]() {
        if (this.handle && !this.isCleared) {
            if (this.type === 'timeout') {
                clearTimeout(this.handle);
                console.log(`[Timer] Cleared setTimeout (handle: ${this.handle}).`);
            } else if (this.type === 'interval') {
                clearInterval(this.handle);
                console.log(`[Timer] Cleared setInterval (handle: ${this.handle}).`);
            }
            this.isCleared = true;
            this.handle = null;
        } else {
            console.log(`[Timer] Timer was already cleared or never started, no-op dispose.`);
        }
    }
}

function executeWithTimer() {
    console.log("n--- Entering executeWithTimer ---");
    using timer = new ManagedTimer(() => console.log("[Callback] Timeout triggered!"), 1000).start();

    console.log("Waiting for a bit...");
    // 模拟一些操作，可能在定时器触发前退出
    if (Math.random() < 0.5) {
        console.log("Exiting early, timer will be cleared.");
        return;
    }

    // 如果不提前退出，等待一段时间让定时器有机会触发
    // 注意：即使定时器触发了，using 块结束时也会尝试清理，
    // 但我们的 dispose 方法会检查 this.isCleared，确保只清理一次。
    // For setInterval, this is more critical.
    console.log("Performing more work...");
    // await new Promise(resolve => setTimeout(resolve, 1500)); // 如果想看定时器触发

    console.log("--- Exiting executeWithTimer normally ---");
}

class ManagedEventListener {
    constructor(target, eventType, callback, options) {
        this.target = target;
        this.eventType = eventType;
        this.callback = callback;
        this.options = options;
        this.isAttached = false;
        console.log(`[Event] Created event listener for ${eventType} on ${target.id}`);
    }

    attach() {
        if (this.isAttached) {
            console.warn(`[Event] Listener already attached.`);
            return this;
        }
        this.target.addEventListener(this.eventType, this.callback, this.options);
        this.isAttached = true;
        console.log(`[Event] Attached listener for ${this.eventType} on ${this.target.id}`);
        return this;
    }

    [Symbol.dispose]() {
        if (this.isAttached) {
            this.target.removeEventListener(this.eventType, this.callback, this.options);
            this.isAttached = false;
            console.log(`[Event] Detached listener for ${this.eventType} on ${this.target.id}`);
        } else {
            console.log(`[Event] Listener was not attached, no-op dispose.`);
        }
    }
}

// 模拟一个 DOM 元素
const simulatedDiv = {
    id: "myDiv",
    _listeners: {},
    addEventListener: function(type, handler, options) {
        if (!this._listeners[type]) this._listeners[type] = [];
        this._listeners[type].push({ handler, options });
        console.log(`[DOM] Added listener for ${type} on ${this.id}`);
    },
    removeEventListener: function(type, handler, options) {
        if (this._listeners[type]) {
            this._listeners[type] = this._listeners[type].filter(l => l.handler !== handler);
            console.log(`[DOM] Removed listener for ${type} on ${this.id}`);
        }
    },
    click: function() {
        console.log(`[DOM] ${this.id} clicked.`);
        if (this._listeners['click']) {
            this._listeners['click'].forEach(l => l.handler({ target: this }));
        }
    }
};

function processWithEventListener() {
    console.log("n--- Entering processWithEventListener ---");
    const clickHandler = (event) => console.log(`[Handler] Click event received on ${event.target.id}`);

    // 自动附加和移除事件监听器
    using listener = new ManagedEventListener(simulatedDiv, 'click', clickHandler).attach();

    simulatedDiv.click(); // 模拟点击

    if (Math.random() > 0.5) {
        console.log("Exiting early, listener will be detached.");
        return;
    }

    console.log("--- Exiting processWithEventListener normally ---");
}

// executeWithTimer();
// processWithEventListener();

这些例子展示了 using 如何能够封装那些需要成对出现（获取/释放）的操作，从而确保资源的正确清理，即使在复杂的控制流中也能保持代码的简洁和健壮。

第四章：深入实现与最佳实践

4.1 实现 Disposable 和 AsyncDisposable 接口

为了更好地组织代码，我们可以定义抽象基类或接口来确保遵循 Symbol.dispose 和 Symbol.asyncDispose 协议。

// 可释放接口 (Disposable)
class Disposable {
    // 强制子类实现 Symbol.dispose
    [Symbol.dispose]() {
        throw new Error("Method 'Symbol.dispose()' must be implemented.");
    }
}

// 异步可释放接口 (AsyncDisposable)
class AsyncDisposable {
    // 强制子类实现 Symbol.asyncDispose
    async [Symbol.asyncDispose]() {
        throw new Error("Method 'Symbol.asyncDispose()' must be implemented.");
    }
}

// 示例：一个同时支持同步和异步清理的资源
class HybridResource extends AsyncDisposable { // 可以同时继承 Disposable
    constructor(name) {
        super();
        this.name = name;
        this.isOpen = false;
        console.log(`[Hybrid ${this.name}] Resource acquired.`);
    }

    openSync() {
        this.isOpen = true;
        console.log(`[Hybrid ${this.name}] Opened synchronously.`);
        return this;
    }

    async openAsync() {
        console.log(`[Hybrid ${this.name}] Opening asynchronously...`);
        await new Promise(r => setTimeout(r, 50));
        this.isOpen = true;
        console.log(`[Hybrid ${this.name}] Opened asynchronously.`);
        return this;
    }

    [Symbol.dispose]() {
        if (this.isOpen) {
            console.log(`[Hybrid ${this.name}] Synchronously disposing...`);
            this.isOpen = false;
        }
    }

    async [Symbol.asyncDispose]() {
        if (this.isOpen) {
            console.log(`[Hybrid ${this.name}] Asynchronously disposing...`);
            await new Promise(r => setTimeout(r, 50));
            this.isOpen = false;
        }
    }
}

function useHybridSync() {
    console.log("n--- Using HybridResource Sync ---");
    using res = new HybridResource("Sync").openSync();
    console.log("Doing sync work.");
}

async function useHybridAsync() {
    console.log("n--- Using HybridResource Async ---");
    await using res = await new HybridResource("Async").openAsync();
    console.log("Doing async work.");
}

// useHybridSync();
// useHybridAsync();

通过定义这样的基类，可以强制开发者在创建可释放对象时实现相应的清理逻辑，提高代码的一致性。

4.2 `using` 声明与错误处理

using 声明的一个强大之处在于它与 JavaScript 的异常处理机制完美集成。无论 using 块内是否发生异常，Symbol.dispose (或 Symbol.asyncDispose) 方法都会被保证调用。

如果 using 块内部抛出异常，并且 dispose 方法也抛出异常，那么 using 块内部的原始异常会被保留并继续传播。dispose 方法中抛出的异常会被抑制，但会作为 SuppressedError 的 suppressed 属性添加到原始异常上（如果环境支持）。这确保了原始错误的根本原因不会被清理逻辑中的次要错误所掩盖。

class ErrorProneResource {
    constructor(name) {
        this.name = name;
        console.log(`[${this.name}] Acquired.`);
    }

    doWork(shouldThrow) {
        console.log(`[${this.name}] Doing work...`);
        if (shouldThrow) {
            throw new Error(`[${this.name}] Error during work!`);
        }
    }

    [Symbol.dispose]() {
        console.log(`[${this.name}] Disposing...`);
        if (this.name === "Res B") { // 假设 Resource B 的清理会失败
            throw new Error(`[${this.name}] Error during dispose!`);
        }
        console.log(`[${this.name}] Disposed.`);
    }
}

function testErrorHandling() {
    console.log("n--- Testing Error Handling ---");
    try {
        using resA = new ErrorProneResource("Res A");
        using resB = new ErrorProneResource("Res B");
        using resC = new ErrorProneResource("Res C");

        resA.doWork(false);
        resB.doWork(true); // 这里抛出异常
        resC.doWork(false); // 不会被执行
    } catch (e) {
        console.error(`Caught main error: ${e.message}`);
        // 在实际环境中，如果 Symbol.dispose 也抛出，
        // 原始异常会包含一个 suppressed 属性，指向 dispose 时的异常。
        // console.error("Suppressed error:", e.suppressed?.message);
    }
    console.log("--- End of Error Handling Test ---");
}

// testErrorHandling();

输出会显示 Res B 的 doWork 抛出异常，然后 Res C 被清理（在 Res B 之前声明，所以先清理），接着 Res B 被清理（其 dispose 也抛出异常），最后 Res A 被清理。主 try...catch 块会捕获 Res B 的 doWork 抛出的异常。

4.3 `using` 与 `try...finally` 的对比

特性 / 方式	`try...finally`	`using` 关键字
代码简洁性	每次使用资源都需要重复编写清理逻辑，代码冗余。	声明式，简洁地表达资源生命周期，无需重复清理代码。
错误预防	容易忘记或写错 `finally` 块中的清理逻辑。	语言层面保证清理，降低人为错误。
可读性	关注点分散，清理逻辑与核心业务逻辑分离较远。	资源获取和生命周期管理紧密结合，提高代码可读性。
异步支持	`finally` 块中需要手动 `await` 异步清理操作。	`await using` 自动处理异步清理，更自然。
嵌套资源	多个资源嵌套时，`finally` 块变得复杂，难以维护。	自动按声明顺序反向清理，优雅处理嵌套资源。
协议依赖	无特定协议，完全依赖开发者手动实现。	依赖 `Symbol.dispose` 或 `Symbol.asyncDispose` 协议。
适用范围	任何需要清理的场景。	仅适用于实现 `Disposable` 或 `AsyncDisposable` 协议的对象。

显然，using 关键字在资源管理方面提供了显著的优势，是 try...finally 在特定场景下的现代化和优越替代品。

4.4 最佳实践

实现幂等性： [Symbol.dispose] 和 [Symbol.asyncDispose] 方法应该是幂等的。这意味着无论调用多少次，第一次调用后都不会产生副作用或错误。这对于防止重复清理或在复杂场景下确保健壮性至关重要。
清理逻辑简洁： dispose 方法应只包含释放资源所需的最小、最直接的逻辑。避免在其中进行复杂的业务处理或可能再次获取资源的逻辑。
避免在 dispose 中抛出意外： 尽管 using 机制会抑制 dispose 内部的异常（并将其附加到主异常），但最佳实践是确保 dispose 方法本身不会抛出异常。如果确实需要处理 dispose 内部的错误，应在 dispose 内部捕获并记录，而不是让它传播。
明确资源所有权： 明确哪个对象拥有资源并负责其清理。using 声明将所有权绑定到声明的变量上。
与现有模块兼容： 如果你在使用一些库或框架，需要检查它们是否提供了与 Disposable 或 AsyncDisposable 协议兼容的接口，或者是否可以通过包装器使其兼容。
考虑后向兼容性： using 关键字是一个较新的提案（Stage 3），尚未在所有环境中广泛支持。在生产环境中使用时，可能需要通过 Babel 等工具进行转译，或者使用 TypeScript 等支持它的语言。

结语

显式资源管理和 using 关键字的引入，是 JavaScript 语言在处理复杂资源管理方面迈出的重要一步。它将 RAII 这种成熟且强大的编程模式带入 JavaScript 生态，使得我们能够以更加声明式、安全和简洁的方式管理文件句柄、网络连接、数据库连接、UI 锁以及其他各种非内存资源。

通过理解 Symbol.dispose 和 Symbol.asyncDispose 协议，并恰当地应用 using 和 await using 声明，JavaScript 开发者将能够编写出更少错误、更易维护、更具可读性的代码。这不仅提升了开发体验，也为构建更加健壮和高效的现代 Web 应用奠定了基础。拥抱 using，让我们的 JavaScript 代码更上一层楼。

引言：JavaScript 资源管理的演变与挑战

第一章：RAII 模式的核心理念

第二章：using 关键字的语法与协议

2.1 using 声明：同步资源管理

2.2 await using 声明：异步资源管理

2.3 using 声明的生命周期

第三章：using 关键字的实际应用场景