JavaScript执行（四）：try里面放return，finally还会执行吗？-深入学习前端重构知识体系

当前位置:　首页>> 技术小册>> 深入学习前端重构知识体系

### JavaScript执行（四）：try里面放return，finally还会执行吗？

在JavaScript的异常处理机制中，`try...catch...finally`结构是不可或缺的一部分，它允许开发者优雅地处理代码中可能出现的错误，并确保在异常发生时程序能够以一种可控的方式继续执行或清理资源。然而，当`try`块中包含了`return`语句时，`finally`块的执行行为就变得微妙且易于混淆。本章节将深入探讨这一话题，解析在`try`块中遇到`return`语句时，`finally`块是否以及如何执行。

#### 一、`try...catch...finally`基础回顾

首先，让我们简要回顾一下`try...catch...finally`结构的基本用法：

- **try块**：包含可能会抛出异常的代码。
- **catch块**（可选）：紧跟在`try`块之后，用于捕获并处理`try`块中抛出的异常。
- **finally块**（可选）：无论是否发生异常，`finally`块中的代码都会被执行。它通常用于执行清理操作，如关闭文件、释放资源等。

#### 二、`try`块中的`return`与`finally`的执行顺序

当`try`块中包含了`return`语句时，JavaScript引擎的处理方式可能会让人感到意外。尽管直觉上可能会认为`return`语句会立即结束函数的执行并返回结果，但在`try...catch...finally`结构中，`finally`块的存在改变了这一行为。

**关键原则**：无论`try`块中是否成功执行了`return`语句，`finally`块都会执行。而且，`finally`块中的代码执行完毕后，`try`块中的`return`语句（如果有的话）才会真正生效，将控制权返回给调用者，并返回其指定的值（如果有修改的话）。

#### 三、示例分析

为了更好地理解这一行为，我们来看几个具体的示例。

##### 示例1：基本场景

```javascript
function testReturnInTry() {
    try {
        return 10;
    } finally {
        console.log('Finally block executed');
    }
}

console.log(testReturnInTry()); // 输出: "Finally block executed" 接着是 10
```

在这个示例中，尽管`try`块中包含了`return 10;`，但在返回之前，`finally`块中的代码被执行了。之后，`return 10;`生效，函数返回`10`。

##### 示例2：`finally`块中的返回值

```javascript
function testReturnInFinally() {
    try {
        return 10;
    } finally {
        return 20;
        console.log('Finally block executed'); // 注意：这行代码实际上不会被执行到，因为return已经发生
    }
}

console.log(testReturnInFinally()); // 输出: 20
```

在这个示例中，尽管`try`块中尝试返回`10`，但`finally`块中的`return 20;`语句覆盖了之前的返回值。因此，函数最终返回`20`。注意，由于`finally`块中的`return`会立即结束函数的执行，所以`console.log`语句实际上不会被执行。

##### 示例3：修改返回值

```javascript
function testModifyReturnValue() {
    let returnValue = 10;
    try {
        returnValue = 20;
        return returnValue;
    } finally {
        returnValue = 30;
        // 注意：这里的修改不会影响已经确定的返回值
    }
}

console.log(testModifyReturnValue()); // 输出: 20
```

在这个示例中，尽管`finally`块修改了`returnValue`的值，但这并不会改变`try`块中`return`语句已经确定的返回值。因此，函数仍然返回`20`。

#### 四、深入理解执行流程

从上述示例中，我们可以总结出JavaScript引擎处理`try...catch...finally`结构中`return`语句的大致流程：

1. **执行`try`块**：如果`try`块中的代码成功执行到`return`语句，则准备返回指定的值，但此时并不立即退出函数。
2. **执行`finally`块**：无论`try`块是否成功执行，`finally`块都会执行。如果`finally`块中有`return`语句，则它会覆盖之前`try`块中的返回值。
3. **确定返回值**：如果`finally`块中没有`return`语句，则使用`try`块中`return`语句指定的值作为函数的返回值。如果`finally`块中有`return`语句，则使用`finally`块中的返回值。
4. **函数结束**：一旦确定了返回值，函数就会结束执行，并将控制权返回给调用者。

#### 五、注意事项与最佳实践

- **避免在`finally`块中使用`return`**：虽然技术上可行，但在`finally`块中使用`return`可能会使代码的逻辑变得难以理解和维护。尽量避免这种做法，除非有非常明确的理由。
- **清理资源**：`finally`块是执行清理操作的理想位置，如关闭文件、释放数据库连接等。无论是否发生异常，这些资源都应该被正确释放。
- **理解执行流程**：深入理解`try...catch...finally`结构中`return`语句的执行流程，可以帮助你编写出更加健壮和易于维护的代码。

#### 六、结论

在JavaScript中，当`try`块中包含了`return`语句时，`finally`块仍然会执行。`finally`块的存在不会影响`try`块中`return`语句的执行，但`finally`块中的`return`语句会覆盖`try`块中的返回值。了解这一行为对于编写健壮的异常处理代码至关重要。通过遵循最佳实践，如避免在`finally`块中使用`return`，你可以确保你的代码既易于理解又易于维护。

该分类下的相关小册推荐：

Javascript重点难点实例精讲（一）

Node.js 开发实战

ES6入门指南

WebSocket入门与案例实战

编程入门课：Javascript从入门到实战

剑指javascript-ES6

Flutter核心技术与实战

web前端开发性能优化实战

经典设计模式Javascript版

零基础学JavaScript

Javascript编程指南

Javascript-ES6与异步编程